@mindexec/cli 0.2.0

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

@@ -0,0 +1,2075 @@
+// File name: X:\Dev@Work\MindExecution\Client\wwwroot\js\mind-map-pipeline.js
+// [Refactor] Owns the async rendering queue and node resizing logic.
+(function () {
+    'use strict';
+
+    const CSS3D_WRAPPER_TRANSITION = 'box-shadow .22s ease, filter .22s ease';
+    const CSS3D_WRAPPER_WEBKIT_TRANSITION = '-webkit-box-shadow .22s ease, -webkit-filter .22s ease';
+
+    // ▼▼▼ [Changed] Add state variables to switch from debounce to throttle ▼▼▼
+    const debounceTimers = new Map();
+    const scrollUpdateThrottleTimers = new Map();
+    const lastScrollCall = new Map();
+    const resizeThrottleTimers = new Map(); // [New] throttle for texture updates during resize
+    const lastResizeUpdateCall = new Map(); // [New] last resize-update timestamp
+    const THROTTLE_INTERVAL = 16; // 16ms -> ~60fps
+    const RESIZE_HANDLE_SIZE = 16;
+    const ENABLE_WEBGL_GLOW = false;
+    function isDocumentHidden() {
+        return typeof document !== 'undefined' && document.visibilityState === 'hidden';
+    }
+
+    function scheduleNonVisualFrame(callback, hiddenDelay = 16) {
+        if (typeof requestAnimationFrame === 'function' && !isDocumentHidden()) {
+            return requestAnimationFrame(callback);
+        }
+
+        return setTimeout(() => callback(typeof performance !== 'undefined' ? performance.now() : Date.now()), hiddenDelay);
+    }
+
+    // ▼▼▼ [Perf] Render queue (time-sliced) ▼▼▼
+    const renderQueue = [];
+    const renderQueueSet = new Set();
+    let renderQueueScheduled = false;
+    let renderModuleRef = null;
+    const RENDER_BUDGET_MS = 8;
+    let renderSeq = 0;
+
+    function computeRenderPriority(module, nodeId) {
+        const entry = module?.nodeObjectsById?.get(nodeId);
+        if (!entry) return 1000000;
+
+        const obj = entry.glObject || entry.cssObject;
+        const visible = obj?.visible === true;
+        const pos = obj?.position || { x: 0, y: 0 };
+        const cam = module.camera?.position || { x: 0, y: 0 };
+
+        const dx = pos.x - cam.x;
+        const dy = pos.y - cam.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        const isSelected = module.multiSelectedNodeIds?.has(nodeId) || module.selectedNodeIdJs === nodeId;
+
+        // 낮은 값이 우선: 보이는 노드 > 선택 노드 > 카메라 근접
+        let priority = dist;
+        if (!visible) priority += 100000;
+        if (isSelected) priority -= 5000;
+
+        return priority;
+    }
+
+    function enqueueRender(module, nodeId) {
+        if (!nodeId) return;
+        renderModuleRef = module;
+        if (!renderQueueSet.has(nodeId)) {
+            renderQueue.push({ nodeId, priority: computeRenderPriority(module, nodeId), seq: renderSeq++ });
+            renderQueueSet.add(nodeId);
+        }
+        scheduleRenderQueue();
+    }
+
+    function scheduleRenderQueue() {
+        if (renderQueueScheduled) return;
+        renderQueueScheduled = true;
+        scheduleNonVisualFrame(() => processRenderQueueBatch());
+    }
+
+    async function processRenderQueueBatch() {
+        const start = performance.now();
+
+        // 우선순위 정렬 (가시/선택/거리)
+        if (renderQueue.length > 1) {
+            renderQueue.sort((a, b) => (a.priority - b.priority) || (a.seq - b.seq));
+        }
+
+        while (renderQueue.length > 0) {
+            const item = renderQueue.shift();
+            const nodeId = item.nodeId;
+            renderQueueSet.delete(nodeId);
+            if (renderModuleRef) {
+                await processRenderQueue(renderModuleRef, nodeId);
+            }
+            if ((performance.now() - start) >= RENDER_BUDGET_MS) {
+                break;
+            }
+        }
+
+        renderQueueScheduled = false;
+        if (renderQueue.length > 0) {
+            scheduleRenderQueue();
+        }
+    }
+    // ▲▲▲ [Perf] ▲▲▲
+
+    // ▼▼▼ [New] Chunked-node virtual scroll constants ▼▼▼
+    const CHUNK_LINE_HEIGHT = 21; // 14px font * 1.5 line-height (matches plain text rendering)
+    const CHUNK_SIZE = 100; // lines per chunk (matches C# TextChunkService)
+    // ▲▲▲ [New] ▲▲▲
+
+    // ▼▼▼ [Perf] Deferred disposal to avoid GC/driver spikes ▼▼▼
+    const disposeQueue = [];
+    let disposeScheduled = false;
+    const DISPOSE_BUDGET_MS = 6; // soft budget per frame
+
+    function enqueueDispose(resource) {
+        if (!resource || typeof resource.dispose !== 'function') return;
+        disposeQueue.push(resource);
+        scheduleDispose();
+    }
+
+    function scheduleDispose() {
+        if (disposeScheduled) return;
+        disposeScheduled = true;
+        if (typeof requestIdleCallback === 'function') {
+            requestIdleCallback(processDisposeQueue);
+        } else {
+            scheduleNonVisualFrame(() => processDisposeQueue());
+        }
+    }
+
+    function processDisposeQueue(deadline) {
+        const start = performance.now();
+        while (disposeQueue.length > 0) {
+            const item = disposeQueue.shift();
+            try { item.dispose(); } catch { }
+
+            if (deadline && typeof deadline.timeRemaining === 'function') {
+                if (deadline.timeRemaining() < 1) break;
+            } else if ((performance.now() - start) >= DISPOSE_BUDGET_MS) {
+                break;
+            }
+        }
+
+        disposeScheduled = false;
+        if (disposeQueue.length > 0) {
+            scheduleDispose();
+        }
+    }
+    // ▲▲▲ [Perf] ▲▲▲
+
+    function removeGlowMesh(group) {
+        if (!group?.getObjectByName) return null;
+        const glowMesh = group.getObjectByName('glow');
+        if (!glowMesh) return null;
+
+        group.remove(glowMesh);
+        enqueueDispose(glowMesh.geometry);
+        enqueueDispose(glowMesh.material);
+        return null;
+    }
+
+    function applyImageCoverUv(bodyMesh, width, height) {
+        if (!bodyMesh) return;
+        if (window.MindMapNodes?.applyImageCoverUv) {
+            window.MindMapNodes.applyImageCoverUv(bodyMesh, width, height);
+        }
+    }
+
+    // ▼▼▼ [Changed] Geometry helper for rounded corners ▼▼▼
+    function createRoundedRectGeometry(width, height, radius) {
+        const shape = new THREE.Shape();
+        const x = -width / 2;
+        const y = -height / 2;
+
+        // Start at bottom-left, go clockwise
+        shape.moveTo(x, y + radius);
+        shape.quadraticCurveTo(x, y, x + radius, y);
+
+        shape.lineTo(x + width - radius, y);
+        shape.quadraticCurveTo(x + width, y, x + width, y + radius);
+
+        shape.lineTo(x + width, y + height - radius);
+        shape.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+
+        shape.lineTo(x + radius, y + height);
+        shape.quadraticCurveTo(x, y + height, x, y + height - radius);
+
+        shape.lineTo(x, y + radius);
+        const points = shape.getPoints();
+        return new THREE.BufferGeometry().setFromPoints(points);
+    }
+    // ▲▲▲ [Changed] ▲▲▲
+
+    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);
+    }
+
+    const IMAGE_SELECTION_GLOW_PAD = 18;
+    const IMAGE_SELECTION_GLOW_COLOR = 0x1e3a8a;
+    const IMAGE_SELECTION_GLOW_OPACITY = 0.18;
+
+    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';
+            outline.userData = { ...(outline.userData || {}), isImageSelectionGlow: true };
+            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 = baseRenderOrder - 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;
+    }
+
+    // ▼▼▼ [New] Update visible content for virtual scrolling ▼▼▼
+    function updateVisibleContent(model, lineHeight, chunkSize) {
+        if (!model.isChunkedText || !model._chunks) {
+            model._visibleContent = model.response || '';
+            model._visibleScrollOffset = model.scrollOffset || 0;
+            return;
+        }
+
+        const scrollOffset = model.scrollOffset || 0;
+        const nodeHeight = model.height || 400;
+
+        // Visible line range in the current viewport
+        const visibleStartLine = Math.floor(scrollOffset / lineHeight);
+        const visibleLineCount = Math.ceil(nodeHeight / lineHeight) + 5; // small buffer
+
+        // Chunk indices needed for that range
+        const startChunkIndex = Math.floor(visibleStartLine / chunkSize) * chunkSize;
+        const endChunkIndex = Math.floor((visibleStartLine + visibleLineCount) / chunkSize) * chunkSize;
+
+        // Merge only the chunks that intersect the current viewport
+        let visibleContent = '';
+        let firstChunkStart = -1;
+        let hasContent = false;
+
+        for (let chunkStart = startChunkIndex; chunkStart <= endChunkIndex; chunkStart += chunkSize) {
+            if (model._chunks[chunkStart]) {
+                if (firstChunkStart === -1) firstChunkStart = chunkStart;
+                visibleContent += model._chunks[chunkStart] + '\n';
+                hasContent = true;
+            }
+        }
+
+        // ▼▼▼ [Changed] If no chunks exist in range, use the nearest loaded chunk ▼▼▼
+        if (!hasContent) {
+            // Find the nearest loaded chunk
+            const loadedChunks = Object.keys(model._chunks).map(Number).sort((a, b) => a - b);
+            if (loadedChunks.length > 0) {
+                // Pick the chunk closest to the current position
+                let closestChunk = loadedChunks[0];
+                for (const chunkStart of loadedChunks) {
+                    if (chunkStart <= startChunkIndex) {
+                        closestChunk = chunkStart;
+                    } else {
+                        break;
+                    }
+                }
+                firstChunkStart = closestChunk;
+                visibleContent = model._chunks[closestChunk] + '\n';
+
+                // Add the next chunk as well if present
+                const nextChunk = closestChunk + chunkSize;
+                if (model._chunks[nextChunk]) {
+                    visibleContent += model._chunks[nextChunk] + '\n';
+                }
+            } else {
+                // If no chunks exist at all, keep the previous response
+                return;
+            }
+        }
+        // ▲▲▲ [Changed] ▲▲▲
+
+        if (firstChunkStart === -1) firstChunkStart = 0;
+
+        // Compute relative scroll offset from the first chunk
+        const firstChunkPixelOffset = firstChunkStart * lineHeight;
+        const relativeScrollOffset = scrollOffset - firstChunkPixelOffset;
+
+        model._visibleContent = visibleContent;
+        model._visibleScrollOffset = Math.max(0, relativeScrollOffset);
+
+        // ▼▼▼ [Changed] Do not overwrite response for chunk nodes (saved/restored via full file path) ▼▼▼
+        // Chunk nodes are restored based on SourceFilePath, so avoid mutating response.
+        // model.response = visibleContent; // removed
+        // ▲▲▲ [Changed] ▲▲▲
+    }
+    // ▲▲▲ [New] ▲▲▲
+    // ▲▲▲ [Changed] ▲▲▲
+
+    async function processRenderQueue(module, nodeId) {
+        // ▼▼▼ [Profiling] Start per-node render timing ▼▼▼
+        // console.time(`[Pipeline] 6. Render Node ${nodeId}`);
+        // ▲▲▲ [Profiling] ▲▲▲
+
+        // ▼▼▼ [Changed] module.nodeRenderLocks -> window.MindMapNodes.nodeRenderLocks ▼▼▼
+        if (window.MindMapNodes.nodeRenderLocks.get(nodeId)) {
+            // console.log(`[Pipeline] [Log Detail] Node ${nodeId} skipped: Render lock active.`);
+            return;
+        }
+
+        // ▼▼▼ [Changed] module.pendingNodeUpdates -> window.MindMapNodes.pendingNodeUpdates ▼▼▼
+        const updateData = window.MindMapNodes.pendingNodeUpdates.get(nodeId);
+        if (!updateData) {
+            return;
+        }
+
+        // console.log(`[Pipeline] [Log Detail] Node ${nodeId} processing queue.`);
+
+        const HANDLE_SIZE = RESIZE_HANDLE_SIZE;
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) {
+            const retryCount = Math.max(0, Number(updateData.retryCount || 0)) + 1;
+            if (retryCount <= 80) {
+                updateData.retryCount = retryCount;
+                window.MindMapNodes.pendingNodeUpdates.set(nodeId, updateData);
+                const delayMs = Math.min(1000, 50 + retryCount * 50);
+                setTimeout(() => {
+                    if (window.MindMapNodes?.pendingNodeUpdates?.has?.(nodeId)) {
+                        window.MindMapPipeline?.processRenderQueue?.(module, nodeId);
+                    }
+                }, delayMs);
+            } else {
+                window.MindMapNodes.pendingNodeUpdates.delete(nodeId);
+                console.warn(`[MindMapPipeline] Dropped pending node update after waiting for missing node: ${nodeId}`);
+            }
+            return;
+        }
+
+        window.MindMapNodes.nodeRenderLocks.set(nodeId, true);
+
+        try {
+            const model = nodeEntry.model;
+            if (Object.prototype.hasOwnProperty.call(updateData, 'isLoading')
+                && updateData.isLoading !== null
+                && updateData.isLoading !== undefined) {
+                model.isLoading = !!updateData.isLoading;
+                model.IsLoading = !!updateData.isLoading;
+            }
+            const zoomLevel = 2;
+
+            // ▼▼▼ [Perf] CSS3D 지원 노드는 거리와 무관하게 텍스처 생성 스킵 ▼▼▼
+            const cameraZ = module.camera?.position?.z || 0;
+            const threshold = 4000;
+            const isHighMode = cameraZ < threshold;
+            const supportsCss3d = model.contentType === 'text' ||
+                model.contentType === 'note' ||
+                model.contentType === 'memo' ||
+                model.contentType === 'markdown' ||
+                model.contentType === 'code';
+
+            // ★ [Fix] currentType이 'CSS'이면 카메라 거리와 무관하게 텍스처 생성 스킵
+            const isCssMode = nodeEntry.currentType === 'CSS';
+            const shouldSkipForCss = supportsCss3d && (isHighMode || cameraZ >= threshold || isCssMode);
+
+            if (shouldSkipForCss) {
+                const prevWidth = model.width || 0;
+                const prevHeight = model.height || 0;
+                const hasExplicitSizeUpdate =
+                    (updateData.width !== null && updateData.width !== undefined) ||
+                    (updateData.height !== null && updateData.height !== undefined);
+
+                // Update model state
+                model.response = updateData.content;
+                model.Response = updateData.content;
+                if (updateData.width !== null && updateData.width !== undefined) model.width = updateData.width;
+                if (updateData.height !== null && updateData.height !== undefined) model.height = updateData.height;
+
+                // ▼▼▼ [Fix] Sync CSS3D/GL userData with updated model dimensions ▼▼▼
+                // Without this, syncCss3dContent() reads stale userData.worldWidth/Height
+                // and reverts the DOM size, causing content/node size mismatch.
+                if (nodeEntry.cssObject?.userData) {
+                    nodeEntry.cssObject.userData.worldWidth = model.width || 400;
+                    nodeEntry.cssObject.userData.worldHeight = model.height || 200;
+                }
+                if (nodeEntry.glObject?.userData) {
+                    nodeEntry.glObject.userData.worldWidth = model.width || 400;
+                    nodeEntry.glObject.userData.worldHeight = model.height || 200;
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+
+                // CSS3D-capable text/note nodes intentionally skip WebGL texture rebuilds.
+                // Keep the live DOM/overlay in sync here so async AI completions do not
+                // require a full board reload before the final answer becomes visible.
+                if (nodeEntry.cssObject && window.MindMapCss3DManager?.syncCss3dContent) {
+                    nodeEntry.isCssDirty = true;
+                    window.MindMapCss3DManager.syncCss3dContent(model, nodeEntry.cssObject);
+                    nodeEntry.isCssDirty = false;
+                } else {
+                    nodeEntry.isCssDirty = true;
+                }
+
+                window.MindMapTextOverlayV2?.invalidateNode?.(module, nodeId, 'content');
+                module.lodRenderer?.requestResidentPatch?.('update-node', nodeId);
+                module._overlayDirty = true;
+                module._lastOverlayKey = '';
+                module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), 3);
+
+                if (isCssMode) {
+                    window.MindMapNodes?.setNodeScrollbarVisibility?.(nodeEntry, false);
+                }
+
+                // Sync CSS3D element size (if present)
+                const wrapper = nodeEntry.cssObject?.element;
+                if (wrapper) {
+                    const w = model.width || 400;
+                    const h = model.height || 200;
+                    const resolutionScale = nodeEntry.cssObject?.userData?.resolutionScale || 1;
+                    wrapper.style.width = (w * resolutionScale) + 'px';
+                    wrapper.style.height = (h * resolutionScale) + 'px';
+                    wrapper.style.minWidth = (w * resolutionScale) + 'px';
+                    wrapper.style.minHeight = (h * resolutionScale) + 'px';
+                    wrapper.style.maxWidth = (w * resolutionScale) + 'px';
+                    wrapper.style.maxHeight = (h * resolutionScale) + 'px';
+                    const inner = wrapper.firstElementChild;
+                    if (inner) {
+                        inner.style.width = w + 'px';
+                        inner.style.height = h + 'px';
+                        inner.style.minWidth = w + 'px';
+                        inner.style.minHeight = h + 'px';
+                        inner.style.maxWidth = w + 'px';
+                        inner.style.maxHeight = h + 'px';
+                        inner.style.transform = `scale(${resolutionScale})`;
+                        inner.style.transformOrigin = '0 0';
+                    }
+                    const textarea = wrapper.querySelector('textarea');
+                    if (textarea) {
+                        textarea.style.width = '100%';
+                        textarea.style.height = '100%';
+                    }
+                }
+
+                // Update glow size if needed (no texture work)
+                const group = nodeEntry.glObject;
+                if (group) {
+                    if (!ENABLE_WEBGL_GLOW) {
+                        removeGlowMesh(group);
+                    } else if (window.MindMapGlowShader) {
+                        const glowMesh = group.getObjectByName('glow');
+                        const w = model.width || 400;
+                        const h = model.height || 200;
+                        if (glowMesh) {
+                            window.MindMapGlowShader.updateGlowSize(glowMesh, w, h, model.contentType || 'text');
+                            glowMesh.position.set(w / 2, -h / 2, 0); // [Fix] Z=0
+                        }
+                    }
+                }
+
+                // Keep WebGL body/tail geometry aligned with CSS3D size (prevents split)
+                if (nodeEntry.glObject) {
+                    const bodyMesh = nodeEntry.glObject.getObjectByName('body');
+                    const tailMesh = nodeEntry.glObject.getObjectByName('tail');
+                    const w = model.width || 400;
+                    const h = model.height || 200;
+
+                    if (bodyMesh) {
+                        const gp = bodyMesh.geometry && bodyMesh.geometry.parameters;
+                        if (!gp || gp.width !== w || gp.height !== h) {
+                            bodyMesh.geometry.dispose();
+                            bodyMesh.geometry = new THREE.PlaneGeometry(w, h);
+                        }
+                        bodyMesh.position.set(w / 2, -h / 2, 0);
+                        if (bodyMesh.material) {
+                            bodyMesh.material.color?.setHex?.(0xffffff);
+                            bodyMesh.material.needsUpdate = true;
+                        }
+                        if (model.contentType === 'image') {
+                            window.MindMapNodes?.syncImageNodeBodyTexture?.(bodyMesh, model);
+                            applyImageCoverUv(bodyMesh, w, h);
+                        }
+                    }
+
+                    if (tailMesh) {
+                        tailMesh.position.set(w / 2, -h - 6, 0);
+                        if (tailMesh.material) {
+                            tailMesh.material.color?.setHex?.(0xffffff);
+                            tailMesh.material.needsUpdate = true;
+                        }
+                    }
+                }
+
+                // Persist size changes for CSS-rendered nodes as well.
+                // Without this, auto-grown AI note dimensions are not saved to the board.
+                const sizeChanged = Math.abs((model.width || 0) - prevWidth) > 0.5
+                    || Math.abs((model.height || 0) - prevHeight) > 0.5;
+                if (!updateData.skipPersistDimensions && (sizeChanged || hasExplicitSizeUpdate) && module.dotNetHelper?.invokeMethodAsync) {
+                    try {
+                        await module.dotNetHelper.invokeMethodAsync(
+                            'UpdateNodeDimensions',
+                            nodeId,
+                            Math.round(model.width || 0),
+                            Math.round(model.height || 0)
+                        );
+                    } catch (e) {
+                        console.warn('[MindMapPipeline] Failed to persist CSS node dimensions:', e);
+                    }
+                }
+
+                window.MindMapNodes.pendingNodeUpdates.delete(nodeId);
+                window.MindMapNodes.nodeRenderLocks.set(nodeId, false);
+                return;
+            }
+            // ▲▲▲ [Perf] ▲▲▲
+
+            const width = (updateData.width !== null && updateData.width !== undefined) ?
+                updateData.width : (model.width || (model.contentType === 'image' ? 300 : 400));
+
+            // ▼▼▼ [Key change] Reduce height-change sensitivity (avoid jitter) ▼▼▼
+            // ▼▼▼ [Changed] Chunk nodes already have fixed maxScroll; skip recalculation ▼▼▼
+            // ▼▼▼ [Changed] Skip height recalculation for expanded nodes (they auto-grow in updateNodeContent) ▼▼▼
+            if ((model.contentType === 'text' || model.contentType === 'note') && !model.isChunkedText && !model.isExpanded) {
+                if (updateData.height === null || updateData.height === undefined) {
+                    const tempModel = { ...model, response: updateData.content };
+                    // When showFullAiResponse is true, do not cap height
+                    const defaultMaxHeight = module.aiNodeDefaultHeight || 200;
+                    const effectiveMaxHeight = module.showFullAiResponse ? 10000 : defaultMaxHeight;
+                    const { height: requiredHeight, maxScrollPx } = await window.MindMapTextureFactory.measureHtmlHeightAsync(tempModel, zoomLevel, width * zoomLevel, null, effectiveMaxHeight);
+
+                    // Keep AI/loading note nodes at least at the configured default height.
+                    // This prevents initial one-line collapse while streaming starts.
+                    const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+                    const promptText = model.prompt ?? model.Prompt ?? '';
+                    const isAiPrompt = !!promptText && !defaultPrompts.includes(promptText);
+                    const minPreferredHeight = (model.isLoading || isAiPrompt)
+                        ? (module.aiNodeDefaultHeight || 200)
+                        : 60;
+                    const normalizedRequiredHeight = Math.max(requiredHeight, minPreferredHeight);
+
+                    const currentHeight = (model.height || 0);
+                    // Update only if delta is >= 5px (was 2px -> 5px)
+                    if (Math.abs(currentHeight - normalizedRequiredHeight) > 5) {
+                        model.height = normalizedRequiredHeight;
+                        model.maxScroll = maxScrollPx / zoomLevel;
+                        model.scrollOffset = Math.min(model.scrollOffset || 0, model.maxScroll);
+                        updateData.height = normalizedRequiredHeight;
+                        try {
+                            module.dotNetHelper?.invokeMethodAsync('UpdateNodeDimensions', nodeId, Math.round(width), Math.round(normalizedRequiredHeight));
+                        } catch { }
+                    } else {
+                        // If the change is tiny, keep the existing height (avoid infinite loop)
+                        updateData.height = currentHeight;
+                    }
+                }
+            }
+            // ▲▲▲ [Changed] ▲▲▲
+            // ▲▲▲ [Key change] ▲▲▲
+
+            const previousContent = String(model.response ?? model.Response ?? '');
+            const hasContentUpdate = updateData.content !== null && updateData.content !== undefined;
+            let nextContent = hasContentUpdate ? String(updateData.content ?? '') : previousContent;
+
+            if (model.contentType === 'image' && hasContentUpdate) {
+                nextContent = window.MindMapNodes?.applyCanonicalNodeResponse?.(model, nextContent) ?? nextContent;
+                updateData.content = nextContent;
+            }
+
+            if (model.contentType === 'image' && nextContent) {
+                // ▼▼▼ [Changed] module.imageCache -> window.MindMapNodes.imageCache ▼▼▼
+                const assetUrls = window.MindMapNodes?.getNodeImageAssetUrls?.(model) || {};
+                const previewUrl = String(assetUrls.previewUrl || nextContent).trim();
+                const originalUrl = String(assetUrls.fullResUrl || assetUrls.originalUrl || '').trim();
+                await window.MindMapTextureFactory.ensureImageCached(nodeId, previewUrl, window.MindMapNodes.imageCache, {
+                    authToken: module.authToken,
+                    allowOriginalFallback: false,
+                    allowOriginalReuseForPreview: false,
+                    originalUrl,
+                    onRefreshedUrl: (refreshedUrl) => {
+                        const normalized = String(refreshedUrl || '').trim();
+                        if (!normalized) {
+                            return;
+                        }
+
+                        window.MindMapNodes?.setNodeImageOriginalUrl?.(model, normalized);
+                        const refreshedAssetUrls = window.MindMapNodes?.getNodeImageAssetUrls?.(model) || {};
+                        if (!refreshedAssetUrls.thumbnailUrl && !String(model.response ?? model.Response ?? '').trim()) {
+                            updateData.content = normalized;
+                            model.response = normalized;
+                            model.Response = normalized;
+                        }
+                    }
+                });
+            }
+
+            window.MindMapNodes.pendingNodeUpdates.delete(nodeId);
+            const contentChanged = previousContent !== nextContent;
+            const hasExplicitSizeUpdate =
+                (updateData.width !== null && updateData.width !== undefined) ||
+                (updateData.height !== null && updateData.height !== undefined);
+            if (hasContentUpdate) {
+                model.response = nextContent;
+                model.Response = nextContent;
+            }
+            if (updateData.width !== null && updateData.width !== undefined) model.width = updateData.width;
+            if (updateData.height !== null && updateData.height !== undefined) model.height = updateData.height;
+
+            if (nodeEntry.cssObject?.userData) {
+                nodeEntry.cssObject.userData.worldWidth = model.width || 400;
+                nodeEntry.cssObject.userData.worldHeight = model.height || 200;
+            }
+            if (nodeEntry.glObject?.userData) {
+                nodeEntry.glObject.userData.worldWidth = model.width || 400;
+                nodeEntry.glObject.userData.worldHeight = model.height || 200;
+            }
+
+            if (model.contentType === 'image' && (contentChanged || hasExplicitSizeUpdate)) {
+                nodeEntry.isCssDirty = true;
+                nodeEntry._imageLodVisualState = null;
+                const bodyMeshForImage = nodeEntry.bodyMesh || nodeEntry.glObject?.getObjectByName?.('body') || null;
+                if (bodyMeshForImage?.userData && contentChanged) {
+                    bodyMeshForImage.userData.imageRenderKey = null;
+                    bodyMeshForImage.userData.pendingImageUrl = '';
+                }
+                if (nodeEntry.cssObject && window.MindMapCss3DManager?.syncCss3dContent) {
+                    window.MindMapCss3DManager.syncCss3dContent(model, nodeEntry.cssObject);
+                    nodeEntry.isCssDirty = false;
+                }
+                module.lodRenderer?.requestResidentPatch?.('update-node', nodeId);
+            }
+
+            // ★ Invalidate LOD cache when content changes
+            window.MindMapTextLOD?.invalidateNodeCache?.(nodeId);
+
+            const updateDataWithScroll = {
+                ...updateData,
+                scrollDelta: updateData.scrollDelta || 0
+            };
+
+            // ★ Troika 모드 체크: text/note/code 노드면 배경 전용 텍스처 사용
+            // ★ Code nodes always use Troika for text rendering
+            const isTroikaMode = (model.contentType === 'code') || // Code nodes always use Troika
+                (window.MindMapNodes?.getTextRenderMode?.() === 'troika'
+                    && (model.contentType === 'text' || model.contentType === 'note')
+                    && !model.isChunkedText);
+
+            let textures, w, h;
+            const existingTextures = window.MindMapNodes.textureCache.get(nodeId);
+
+            if (isTroikaMode) {
+                // ★ Troika 최적화: 이미 캐시된 텍스처가 있고, 크기와 내용이 동일하면 재사용
+                const canReuseTexture = existingTextures?.default?.body
+                    && existingTextures._cachedWidth === model.width
+                    && existingTextures._cachedHeight === model.height
+                    && existingTextures._cachedContent === model.response; // ★ Content change check
+
+                if (canReuseTexture) {
+                    // 캐시된 텍스처 재사용 (텍스처 재생성 스킵)
+                    textures = existingTextures;
+                    w = model.width;
+                    h = model.height;
+                } else {
+                    // 배경 텍스처 생성
+                    const result = await window.MindMapTextureFactory.generateTroikaBackgroundTextures(module, model, model.width, model.height);
+                    textures = result.textures;
+                    // 캐시 메타데이터 저장
+                    textures._cachedWidth = model.width;
+                    textures._cachedHeight = model.height;
+                    textures._cachedContent = model.response; // ★ Track content for change detection
+                    w = result.width;
+                    h = result.height;
+                }
+            } else {
+                // Canvas 모드: 기존 방식 (텍스트 포함)
+                const isResizeUpdate = updateData.width !== undefined || updateData.height !== undefined;
+                const isBatchExpand = updateData.skipSelected === true; // ★ Batch expand operation
+
+                // 고정 품질 렌더링 (LOD 품질 스케일 제거)
+                const qualityScale = 1.0;
+                console.log(`[processRenderQueue] Canvas mode for ${nodeId}, qualityScale=${qualityScale}, isResize=${isResizeUpdate}, isBatch=${isBatchExpand}`);
+                const result = await window.MindMapTextureFactory.generateAndCacheTextures(module, model, window.MindMapNodes.imageCache, updateDataWithScroll, qualityScale);
+                textures = result.textures;
+                w = result.width;
+                h = result.height;
+
+                // 캐시 메타데이터 (콘텐츠 변경 감지용)
+                if (textures.default?.body) {
+                    textures.default.body._cachedContent = model.response ?? '';
+                }
+            }
+
+            // ★ 기존 텍스처 dispose (Troika에서 재사용한 경우 제외)
+            if (existingTextures && existingTextures !== textures) {
+                enqueueDispose(existingTextures.default?.body);
+                enqueueDispose(existingTextures.selected?.body);
+                enqueueDispose(existingTextures.glow?.texture);
+            }
+            window.MindMapNodes.textureCache.set(nodeId, textures);
+
+            const isSelected = module.multiSelectedNodeIds.has(nodeId);
+            // ★ [Fix] If selected texture is null (skipSelected mode), use default texture
+            const active = (isSelected && textures.selected?.body) ? textures.selected : textures.default;
+            const group = nodeEntry.glObject;
+
+            const CORNER_RADIUS = 20;
+            const OUTLINE_SHRINK = 2;
+            const OUTLINE_RADIUS = Math.max(1, CORNER_RADIUS - 1);
+            const CHAMFER_SIZE = 16;
+
+            if (group) {
+                const bodyMesh = group.getObjectByName('body');
+                const tailMesh = group.getObjectByName('tail');
+                let glowMesh = group.getObjectByName('glow');
+                const outline = group.getObjectByName('outline');
+                if (!ENABLE_WEBGL_GLOW) {
+                    glowMesh = removeGlowMesh(group);
+                }
+                const baseRenderOrder = group.userData?.baseRenderOrder ?? bodyMesh?.renderOrder ?? module.nodeZCounter++;
+                group.userData = { ...(group.userData || {}), baseRenderOrder };
+
+                if (bodyMesh) {
+                    const gp = bodyMesh.geometry && bodyMesh.geometry.parameters;
+                    if (!gp || gp.width !== w || gp.height !== h) {
+                        bodyMesh.geometry.dispose();
+                        bodyMesh.geometry = new THREE.PlaneGeometry(w, h);
+
+                        if (outline) {
+                            outline.geometry.dispose();
+                            outline.geometry = createRoundedRectGeometry(
+                                w - OUTLINE_SHRINK,
+                                h - OUTLINE_SHRINK,
+                                OUTLINE_RADIUS
+                            );
+                        }
+                    }
+                    if (active?.body) {
+                        bodyMesh.material.map = active.body;
+                    }
+                    bodyMesh.material.color.setHex(0xffffff);
+                    bodyMesh.material.needsUpdate = true;
+                    bodyMesh.position.set(w / 2, -h / 2, 0);
+                    if (model.contentType === 'image') {
+                        if (contentChanged) {
+                            bodyMesh.userData ??= {};
+                            bodyMesh.userData.imageRenderKey = null;
+                            bodyMesh.userData.pendingImageUrl = '';
+                        }
+                        applyImageCoverUv(bodyMesh, w, h);
+                    }
+
+                    if (model.contentType === 'image') {
+                        syncImageSelectionGlow(group, w, h, baseRenderOrder, isSelected);
+                    } else if (outline) {
+                        outline.position.copy(bodyMesh.position);
+                        outline.position.z = 0; // [Fix] Z=0
+                        outline.visible = false; // Disabled - using SDF glow instead
+                    }
+                }
+                if (tailMesh) {
+                    if (active?.tail) {
+                        tailMesh.material.map = active.tail;
+                        tailMesh.material.needsUpdate = true;
+                    }
+                    tailMesh.position.set(w / 2, -h - 6, 0);
+                }
+
+                // ▼▼▼ [SDF Glow] Use shader-based glow (no textures!) ▼▼▼
+                if (ENABLE_WEBGL_GLOW && window.MindMapGlowShader) {
+                    const contentType = model.contentType || 'text';
+                    if (glowMesh) {
+                        window.MindMapGlowShader.updateGlowSize(glowMesh, w, h, contentType);
+                        window.MindMapGlowShader.updateGlowSelection(glowMesh, isSelected);
+                        glowMesh.position.set(w / 2, -h / 2, 0); // [Fix] Z=0
+                        glowMesh.renderOrder = baseRenderOrder - 5;
+                    } else {
+                        const newGlow = window.MindMapGlowShader.createSDFGlowMesh(w, h, isSelected, contentType);
+                        newGlow.position.set(w / 2, -h / 2, 0); // [Fix] Z=0
+                        newGlow.renderOrder = baseRenderOrder - 5;
+                        // ★ 카메라 거리에 따라 초기 가시성 설정
+                        const cameraZ = module.camera?.position?.z ?? Infinity;
+                        const threshold = 4000;
+                        newGlow.visible = cameraZ < threshold;
+                        group.add(newGlow);
+                    }
+                }
+                // ▲▲▲ [SDF Glow] ▲▲▲
+
+                // ▼▼▼ [Changed] Update resize handles (4 corners + optional 4 edges) ▼▼▼
+                if (model.contentType !== 'pdf') {
+                    // [Fix] 이미지 노드 리사이즈 핸들 크기 통일 (Note와 동일한 16px)
+                    const actualHandleSize = HANDLE_SIZE;
+
+                    const edgeWidthLength = Math.max(10, w - actualHandleSize * 2);
+                    const edgeHeightLength = Math.max(10, h - actualHandleSize * 2);
+
+                    const handleConfigs = {
+                        // ▼▼▼ [Fix] Corners - Z값을 0으로 통일하여 시차(Parallax) 완전 제거 ▼▼▼
+                        'resizeHandle_TL': { x: actualHandleSize / 2, y: -actualHandleSize / 2, w: actualHandleSize, h: actualHandleSize, z: 0 },
+                        'resizeHandle_TR': { x: w - actualHandleSize / 2, y: -actualHandleSize / 2, w: actualHandleSize, h: actualHandleSize, z: 0 },
+                        'resizeHandle_BL': { x: actualHandleSize / 2, y: -h + actualHandleSize / 2, w: actualHandleSize, h: actualHandleSize, z: 0 },
+                        'resizeHandle_BR': { x: w - actualHandleSize / 2, y: -h + actualHandleSize / 2, w: actualHandleSize, h: actualHandleSize, z: 0 }
+                        // ▲▲▲ [Fix] ▲▲▲
+                    };
+
+                    if (model.contentType !== 'image') {
+                        Object.assign(handleConfigs, {
+                            // ▼▼▼ [Fix] Edges - Z값을 0으로 통일 ▼▼▼
+                            'resizeHandle_T': { x: w / 2, y: -actualHandleSize / 2, w: edgeWidthLength, h: actualHandleSize, z: 0 },
+                            'resizeHandle_B': { x: w / 2, y: -h + actualHandleSize / 2, w: edgeWidthLength, h: actualHandleSize, z: 0 },
+                            'resizeHandle_L': { x: actualHandleSize / 2, y: -h / 2, w: actualHandleSize, h: edgeHeightLength, z: 0 },
+                            'resizeHandle_R': { x: w - actualHandleSize / 2, y: -h / 2, w: actualHandleSize, h: edgeHeightLength, z: 0 }
+                            // ▲▲▲ [Fix] ▲▲▲
+                        });
+                    }
+
+                    // Iterate all possible handles to update position OR hide if not needed
+                    const allHandleNames = [
+                        'resizeHandle_TL', 'resizeHandle_TR', 'resizeHandle_BL', 'resizeHandle_BR',
+                        'resizeHandle_T', 'resizeHandle_B', 'resizeHandle_L', 'resizeHandle_R'
+                    ];
+
+                    allHandleNames.forEach(name => {
+                        const handle = group.getObjectByName(name);
+                        const cfg = handleConfigs[name];
+
+                        if (handle) {
+                            if (cfg) {
+                                // Active handle: update position/size and ensure visible
+                                handle.visible = true; // Ensure visible (might have been hidden)
+                                handle.position.set(cfg.x, cfg.y, cfg.z);
+                                const gp = handle.geometry?.parameters;
+                                if (gp && (gp.width !== cfg.w || gp.height !== cfg.h)) {
+                                    handle.geometry.dispose();
+                                    handle.geometry = new THREE.PlaneGeometry(cfg.w, cfg.h);
+                                }
+                                if (model.contentType === 'image' && handle.material) {
+                                    handle.material.opacity = 0.0;
+                                    handle.material.colorWrite = false;
+                                    handle.material.needsUpdate = true;
+                                }
+                            } else {
+                                // Inactive handle (e.g. edge on image node): hide it
+                                handle.visible = false;
+                            }
+                        }
+                    });
+                }
+                // ▲▲▲ [Changed] ▲▲▲
+
+                group.userData.worldWidth = w;
+                group.userData.worldHeight = h;
+
+                const isCssMediaNode =
+                    (model.contentType === 'image' || model.contentType === 'video' || model.contentType === 'embed')
+                    && !!nodeEntry.cssObject;
+                const mediaFrameResynced =
+                    isCssMediaNode &&
+                    window.MindMapCss3DManager?.syncCss3dMediaNodeFrame?.(model, nodeEntry.cssObject) === true;
+
+                if (group.visible === false && nodeEntry.currentType === 'GL') {
+                    group.visible = true;
+                    if (nodeEntry.cssObject) {
+                        nodeEntry.cssObject.visible = false;
+                    }
+                }
+
+                if (!mediaFrameResynced &&
+                    window.MindMapNodes &&
+                    typeof window.MindMapNodes.updateNodeSpatialGrid === 'function') {
+                    window.MindMapNodes.updateNodeSpatialGrid(module, nodeId);
+                }
+            }
+        } catch (err) {
+            console.error(`[Pipeline] Render Node ${nodeId} Failed:`, err);
+        } finally {
+            window.MindMapNodes.nodeRenderLocks.set(nodeId, false);
+            // console.timeEnd(`[Pipeline] 6. Render Node ${nodeId}`);
+
+            // If another update arrived while processing, re-run (with a small delay)
+            if (window.MindMapNodes.pendingNodeUpdates.has(nodeId)) {
+                setTimeout(() => enqueueRender(module, nodeId), 50);
+            }
+        }
+    }
+
+    // --- Resizing handlers (keep existing behavior) ---
+
+    // ▼▼▼ [Changed] Add corner parameter for four-corner resizing ▼▼▼
+    function startResizing(module, nodeId, startX, startY, corner = 'BR') {
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) return false;
+        if (nodeEntry.model.contentType === 'pdf') return false;
+
+        module.isResizing = true;
+        module.resizingNodeId = nodeId;
+        module.resizeCorner = corner; // TL, TR, BL, BR
+        const cssRendererEnabled = module?.renderDebugFlags?.enableCss3d !== false;
+        const shouldResizeCssObject = !!nodeEntry.cssObject &&
+            cssRendererEnabled &&
+            (nodeEntry.currentType === 'CSS' || nodeEntry.cssObject.visible === true);
+        const activeResizeType = shouldResizeCssObject ? 'CSS' : 'GL';
+        module.resizeNodeObject = activeResizeType === 'CSS' ? nodeEntry.cssObject : nodeEntry.glObject;
+        if (!module.resizeNodeObject && nodeEntry.cssObject) {
+            module.resizeNodeObject = nodeEntry.cssObject;
+            nodeEntry.currentResizeType = 'CSS';
+        } else {
+            nodeEntry.currentResizeType = activeResizeType;
+        }
+        window.MindMapNodes?.bringNodeToFront?.(module, nodeId);
+        window.MindMapInteractions?.setBrowserSelectionLock?.(true, 'resize');
+        document.body.classList.add('is-resizing');
+        module.resizeStartMousePos = { x: startX, y: startY };
+        module.resizeStartDimensions = {
+            w: nodeEntry.model.width || 400,
+            h: nodeEntry.model.height || 200
+        };
+        // Store initial position from the active render object (CSS/GL) to avoid
+        // image-node jumps when CSS and GL are slightly out of sync.
+        const activePos = module.resizeNodeObject?.position
+            || nodeEntry.cssObject?.position
+            || nodeEntry.glObject?.position
+            || { x: 0, y: 0 };
+        module.resizeStartPosition = {
+            x: activePos.x,
+            y: activePos.y
+        };
+
+        // Force immediate CSS/GL transform alignment at resize start.
+        if (nodeEntry.glObject) {
+            nodeEntry.glObject.position.x = activePos.x;
+            nodeEntry.glObject.position.y = activePos.y;
+        }
+        if (nodeEntry.cssObject) {
+            nodeEntry.cssObject.position.x = activePos.x;
+            nodeEntry.cssObject.position.y = activePos.y;
+            nodeEntry.cssObject.updateMatrixWorld(true);
+        }
+
+        // ▼▼▼ [Fix] 리사이즈 중 CSS transition 비활성화하여 즉시 크기 변경 ▼▼▼
+        if (nodeEntry.cssObject && nodeEntry.cssObject.element) {
+            const wrapper = nodeEntry.cssObject.element;
+            wrapper.style.transition = 'none';
+            const inner = wrapper.firstElementChild;
+            if (inner) {
+                inner.style.transition = 'none';
+            }
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // ▼▼▼ [UndoRedo] Capture before-state for undo ▼▼▼
+        if (module.dotNetHelper) {
+            try { module.dotNetHelper.invokeMethodAsync('StartResizeCapture', nodeId); } catch { }
+        }
+        // ▲▲▲ [UndoRedo] ▲▲▲
+
+        return true;
+    }
+    // ▲▲▲ [Changed] ▲▲▲
+
+    function doResizing(module, currentX, currentY) {
+        if (!module.isResizing || !module.resizeNodeObject) return;
+        // ▼▼▼ [Changed] Cap max node size: X=2000, Y=4000 ▼▼▼
+        const MAX_NODE_WIDTH = 2000;
+        const MAX_NODE_HEIGHT = 4000;
+        const MIN_WIDTH = 200;
+        const MIN_HEIGHT = 100;
+        // ▲▲▲ [Changed] ▲▲▲
+
+        const vfov = (module.camera.fov * Math.PI) / 180;
+        const viewHeight = 2 * Math.tan(vfov / 2) * module.camera.position.z;
+        const viewWidth = viewHeight * module.camera.aspect;
+        const screenToWorldFactorX = viewWidth / module.container.clientWidth;
+        const screenToWorldFactorY = viewHeight / module.container.clientHeight;
+        const worldDeltaX = (currentX - module.resizeStartMousePos.x) * screenToWorldFactorX;
+        // ▼▼▼ [Fix] Negate Y delta: screen Y increases downward, world Y increases upward ▼▼▼
+        const worldDeltaY = -(currentY - module.resizeStartMousePos.y) * screenToWorldFactorY;
+
+        const HANDLE_SIZE = RESIZE_HANDLE_SIZE;
+        // ▼▼▼ [Changed] Use stored nodeId (CSS3D mode compatible) ▼▼▼
+        const nodeId = module.resizingNodeId || (module.resizeNodeObject.userData?.nodeId || module.resizeNodeObject.element?.dataset?.nodeId);
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) {
+            console.warn('[Pipeline] doResizing: nodeEntry not found for', nodeId);
+            return;
+        }
+
+        const corner = module.resizeCorner || 'BR';
+        const startW = module.resizeStartDimensions.w;
+        const startH = module.resizeStartDimensions.h;
+        const startX = module.resizeStartPosition.x;
+        const startY = module.resizeStartPosition.y;
+
+        let finalWidth, finalHeight, newPosX, newPosY;
+
+        // ▼▼▼ [Changed] Eight-direction resize logic (4 corners + 4 edges) ▼▼▼
+        // Node position is top-left corner in Three.js (Y increases upward)
+        // Depending on handle, we compute size and position differently
+        switch (corner) {
+            // === Corners (diagonal resize) ===
+            case 'TL': // Top-Left: anchor bottom-right, move top-left
+                finalWidth = startW - worldDeltaX;
+                finalHeight = startH + worldDeltaY;
+                newPosX = startX + worldDeltaX;
+                newPosY = startY + worldDeltaY;
+                break;
+            case 'TR': // Top-Right: anchor bottom-left, expand right/up
+                finalWidth = startW + worldDeltaX;
+                finalHeight = startH + worldDeltaY;
+                newPosX = startX;
+                newPosY = startY + worldDeltaY;
+                break;
+            case 'BL': // Bottom-Left: anchor top-right, expand left/down
+                finalWidth = startW - worldDeltaX;
+                finalHeight = startH - worldDeltaY;
+                newPosX = startX + worldDeltaX;
+                newPosY = startY;
+                break;
+            case 'BR': // Bottom-Right: anchor top-left (original behavior)
+                finalWidth = startW + worldDeltaX;
+                finalHeight = startH - worldDeltaY;
+                newPosX = startX;
+                newPosY = startY;
+                break;
+            // === Edges (single-direction resize) ===
+            case 'T': // Top edge: vertical only, anchor bottom
+                finalWidth = startW;
+                finalHeight = startH + worldDeltaY;
+                newPosX = startX;
+                newPosY = startY + worldDeltaY;
+                break;
+            case 'B': // Bottom edge: vertical only, anchor top
+                finalWidth = startW;
+                finalHeight = startH - worldDeltaY;
+                newPosX = startX;
+                newPosY = startY;
+                break;
+            case 'L': // Left edge: horizontal only, anchor right
+                finalWidth = startW - worldDeltaX;
+                finalHeight = startH;
+                newPosX = startX + worldDeltaX;
+                newPosY = startY;
+                break;
+            case 'R': // Right edge: horizontal only, anchor left
+                finalWidth = startW + worldDeltaX;
+                finalHeight = startH;
+                newPosX = startX;
+                newPosY = startY;
+                break;
+            default:
+                finalWidth = startW + worldDeltaX;
+                finalHeight = startH - worldDeltaY;
+                newPosX = startX;
+                newPosY = startY;
+                break;
+        }
+
+        // Clamp size
+        let clampedWidth = Math.min(MAX_NODE_WIDTH, Math.max(MIN_WIDTH, finalWidth));
+        let clampedHeight = Math.min(MAX_NODE_HEIGHT, Math.max(MIN_HEIGHT, finalHeight));
+
+        // ▼▼▼ [Image Resize Fix] Remove specific Ratio Preservation for now (Treat as normal nodes) ▼▼▼
+        // Normal nodes Logic (apply to all)
+        // Adjust position if size was clamped (keep anchor point fixed)
+        if (corner === 'TL' || corner === 'BL' || corner === 'L') {
+            // Left handles: position adjusts with width changes
+            const widthDiff = finalWidth - clampedWidth;
+            newPosX += widthDiff;
+        }
+        if (corner === 'TL' || corner === 'TR' || corner === 'T') {
+            // Top handles: position adjusts with height changes
+            const heightDiff = finalHeight - clampedHeight;
+            newPosY -= heightDiff;
+        }
+        // ▲▲▲ [Image Resize Fix] ▲▲▲
+        // ▲▲▲ [Image Resize Fix] ▲▲▲
+
+        finalWidth = clampedWidth;
+        finalHeight = clampedHeight;
+        // ▲▲▲ [Changed] ▲▲▲
+
+        // ▼▼▼ [Refactor] 스냅 현상 제거: 실수형 크기/좌표 그대로 사용 ▼▼▼
+        nodeEntry.model.width = finalWidth;
+        nodeEntry.model.height = finalHeight;
+
+        // ▼▼▼ [Changed] Update node position for corner resizing ▼▼▼
+        if (nodeEntry.glObject) {
+            nodeEntry.glObject.position.x = newPosX;
+            nodeEntry.glObject.position.y = newPosY;
+        }
+        if (nodeEntry.cssObject) {
+            nodeEntry.cssObject.position.x = newPosX;
+            nodeEntry.cssObject.position.y = newPosY;
+            // ▼▼▼ [Fix] CSS3D matrixWorld 즉시 갱신하여 CSS3DRenderer가 새 위치를 반영하도록 보장 ▼▼▼
+            nodeEntry.cssObject.updateMatrixWorld(true);
+            // ▲▲▲ [Fix] ▲▲▲
+        }
+        // ▼▼▼ [Fix] model position도 동기화하여 다른 sync 로직과의 일관성 보장 ▼▼▼
+        nodeEntry.model.positionX = newPosX;
+        nodeEntry.model.positionY = newPosY;
+        // ▲▲▲ [Fix] ▲▲▲
+        // ▲▲▲ [Changed] ▲▲▲
+
+        if (nodeEntry.cssObject) {
+            const wrapper = nodeEntry.cssObject.element;
+            // ▼▼▼ [Fix] CSS3D 노드는 resolutionScale을 고려하여 DOM 크기 설정 ▼▼▼
+            // CSS3D 객체의 scale은 1/resolutionScale이므로, DOM 크기는 worldSize * resolutionScale
+            const resolutionScale = nodeEntry.cssObject.userData?.resolutionScale || 1;
+            const domWidth = nodeEntry.model.width * resolutionScale;
+            const domHeight = nodeEntry.model.height * resolutionScale;
+
+            wrapper.style.width = domWidth + 'px';
+            wrapper.style.height = domHeight + 'px';
+            wrapper.style.minWidth = domWidth + 'px';
+            wrapper.style.minHeight = domHeight + 'px';
+            wrapper.style.maxWidth = domWidth + 'px';
+            wrapper.style.maxHeight = domHeight + 'px';
+
+            const innerContent = wrapper.firstElementChild;
+            if (innerContent) {
+                // innerContent는 transform: scale(resolutionScale)이 적용되므로 원본 크기 사용
+                innerContent.style.width = nodeEntry.model.width + 'px';
+                innerContent.style.height = nodeEntry.model.height + 'px';
+                innerContent.style.minWidth = nodeEntry.model.width + 'px';
+                innerContent.style.minHeight = nodeEntry.model.height + 'px';
+                innerContent.style.maxWidth = nodeEntry.model.width + 'px';
+                innerContent.style.maxHeight = nodeEntry.model.height + 'px';
+
+                // ▼▼▼ [Fix] 이미지 노드의 경우 내부 img 요소 크기도 업데이트 ▼▼▼
+                if (nodeEntry.model.contentType === 'image') {
+                    const imgEl = innerContent.querySelector('img');
+                    if (imgEl) {
+                        imgEl.style.width = '100%';
+                        imgEl.style.height = '100%';
+                    }
+                    // contentWrapper와 responseDiv 크기도 업데이트
+                    const contentWrapper = innerContent.querySelector('.node-content-wrapper');
+                    if (contentWrapper) {
+                        contentWrapper.style.width = '100%';
+                        contentWrapper.style.height = '100%';
+                    }
+                    const responseDiv = innerContent.querySelector('.node-response');
+                    if (responseDiv) {
+                        responseDiv.style.width = '100%';
+                        responseDiv.style.height = '100%';
+                    }
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+            }
+
+            // ▼▼▼ [Fix] userData도 업데이트하여 syncCss3dContent에서 올바른 크기 사용 ▼▼▼
+            nodeEntry.cssObject.userData.worldWidth = nodeEntry.model.width;
+            nodeEntry.cssObject.userData.worldHeight = nodeEntry.model.height;
+            // ▲▲▲ [Fix] ▲▲▲
+        }
+
+        if (window.MindMapCss3DManager?.syncAgentPlanStack) {
+            window.MindMapCss3DManager.syncAgentPlanStack(module, nodeId, { persist: false });
+        }
+
+        if (nodeEntry.glObject) {
+            const group = nodeEntry.glObject;
+
+            const bodyMesh = group.getObjectByName('body');
+            const outline = group.getObjectByName('outline');
+            let glowMesh = group.getObjectByName('glow');
+            if (!ENABLE_WEBGL_GLOW) {
+                glowMesh = removeGlowMesh(group);
+            }
+            const CORNER_RADIUS = 20;
+            const OUTLINE_SHRINK = 2;
+            const OUTLINE_RADIUS = Math.max(1, CORNER_RADIUS - 1);
+            const CHAMFER_SIZE = 16;
+            if (bodyMesh) {
+                bodyMesh.geometry.dispose();
+                bodyMesh.geometry = new THREE.PlaneGeometry(nodeEntry.model.width, nodeEntry.model.height);
+                bodyMesh.position.set(nodeEntry.model.width / 2, -nodeEntry.model.height / 2, 0);
+                if (nodeEntry.model.contentType === 'image') {
+                    applyImageCoverUv(bodyMesh, nodeEntry.model.width, nodeEntry.model.height);
+                }
+                // ▼▼▼ [Fix] CSS 모드에서 리사이즈 중 body mesh 숨김 유지 (이중 렌더링 방지) ▼▼▼
+                if (nodeEntry.currentResizeType === 'CSS') {
+                    bodyMesh.visible = false;
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+
+                // ▼▼▼ [Image Resize Fix] Don't clear map during resize to prevent white flash/loss ▼▼▼
+                // if (bodyMesh.material.map) {
+                //    bodyMesh.material.map = null;
+                //    bodyMesh.material.color.setHex(0xffffff);
+                //    bodyMesh.material.needsUpdate = true;
+                // }
+                // ▲▲▲ [Image Resize Fix] ▲▲▲
+                const isSelected = module.multiSelectedNodeIds.has(module.resizingNodeId) || module.selectedNodeIdJs === module.resizingNodeId;
+                if (nodeEntry.model.contentType === 'image') {
+                    const usesCssViewDuringResize =
+                        nodeEntry.currentResizeType === 'CSS' ||
+                        (nodeEntry.currentType === 'CSS' && !!nodeEntry.cssObject?.visible);
+                    syncImageSelectionGlow(
+                        group,
+                        nodeEntry.model.width,
+                        nodeEntry.model.height,
+                        group.userData?.baseRenderOrder ?? bodyMesh?.renderOrder ?? 0,
+                        isSelected && !usesCssViewDuringResize
+                    );
+                    window.MindMapNodes?.syncImageMidLodDecorations?.(
+                        group,
+                        nodeEntry.model.width,
+                        nodeEntry.model.height,
+                        group.userData?.baseRenderOrder ?? bodyMesh?.renderOrder ?? 0,
+                        isSelected,
+                        usesCssViewDuringResize
+                            ? { edgeVisible: false, glowVisible: false }
+                            : undefined
+                    );
+                } else if (outline) {
+                    outline.geometry.dispose();
+                    outline.geometry = createRoundedRectGeometry(
+                        nodeEntry.model.width - OUTLINE_SHRINK,
+                        nodeEntry.model.height - OUTLINE_SHRINK,
+                        OUTLINE_RADIUS
+                    );
+                    outline.position.copy(bodyMesh.position);
+                    outline.position.z = 0; // [Fix] Z=0
+                    outline.visible = false; // Disabled - using SDF glow instead
+                    if (outline.material) {
+                        outline.material.color.setHex(isSelected ? 0x7b7ff2 : 0x9ca3af);
+                        outline.material.opacity = 1.0;
+                    }
+                }
+            }
+
+            // ▼▼▼ [Changed] Update glow position during resize (keep visible, no flickering) ▼▼▼
+            if (ENABLE_WEBGL_GLOW && glowMesh) {
+                // Update position to match bodyMesh
+                glowMesh.position.set(nodeEntry.model.width / 2, -nodeEntry.model.height / 2, 0); // [Fix] Z=0
+                // Don't hide - causes flickering
+            }
+            // ▲▲▲ [Changed] ▲▲▲
+            const tailMesh = group.getObjectByName('tail');
+            if (tailMesh) {
+                tailMesh.position.set(nodeEntry.model.width / 2, -nodeEntry.model.height - 6, 0);
+            }
+            // ▼▼▼ [Changed] Update eight resize handles (4 corners + 4 edges with geometry) ▼▼▼
+            const edgeWidthLength = Math.max(10, nodeEntry.model.width - HANDLE_SIZE * 2);
+            const edgeHeightLength = Math.max(10, nodeEntry.model.height - HANDLE_SIZE * 2);
+            const handleConfigs = {
+                // ▼▼▼ [Fix] Corners Z=0 for parallax elimination ▼▼▼
+                'resizeHandle_TL': { x: HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                'resizeHandle_TR': { x: nodeEntry.model.width - HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                'resizeHandle_BL': { x: HANDLE_SIZE / 2, y: -nodeEntry.model.height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                'resizeHandle_BR': { x: nodeEntry.model.width - HANDLE_SIZE / 2, y: -nodeEntry.model.height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                // Edges Z=0
+                'resizeHandle_T': { x: nodeEntry.model.width / 2, y: -HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 0 },
+                'resizeHandle_B': { x: nodeEntry.model.width / 2, y: -nodeEntry.model.height + HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 0 },
+                'resizeHandle_L': { x: HANDLE_SIZE / 2, y: -nodeEntry.model.height / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 0 },
+                'resizeHandle_R': { x: nodeEntry.model.width - HANDLE_SIZE / 2, y: -nodeEntry.model.height / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 0 }
+                // ▲▲▲ [Fix] ▲▲▲
+            };
+            Object.entries(handleConfigs).forEach(([name, cfg]) => {
+                const handle = group.getObjectByName(name);
+                if (handle) {
+                    handle.position.set(cfg.x, cfg.y, cfg.z);
+                    const gp = handle.geometry?.parameters;
+                    if (gp && (gp.width !== cfg.w || gp.height !== cfg.h)) {
+                        handle.geometry.dispose();
+                        handle.geometry = new THREE.PlaneGeometry(cfg.w, cfg.h);
+                    }
+                }
+            });
+            // ▲▲▲ [Changed] ▲▲▲
+
+            // ▼▼▼ [New] Update Troika text clipRect on resize for code nodes ▼▼▼
+            if (nodeEntry.model.contentType === 'code') {
+                const troikaText = group.userData.troikaText;
+                if (troikaText && troikaText.userData) {
+                    const padding = troikaText.userData.padding || 16;
+                    const filenameHeight = troikaText.userData.filenameHeight || 0; // ★ Include filename height
+                    const newWidth = nodeEntry.model.width;
+                    const newHeight = nodeEntry.model.height;
+                    const newTextWidth = newWidth - padding * 2;
+                    const newVisibleHeight = newHeight - padding * 2 - filenameHeight; // ★ Subtract filename height
+
+                    // Update userData dimensions
+                    troikaText.userData.nodeWidth = newWidth;
+                    troikaText.userData.nodeHeight = newHeight;
+                    troikaText.userData.textWidth = newTextWidth;
+                    troikaText.userData.visibleHeight = newVisibleHeight;
+
+                    // ★ DO NOT update maxWidth - code nodes should keep maxWidth: Infinity (no word wrap)
+                    // troikaText.maxWidth = newTextWidth; // REMOVED - this forces word wrap
+
+                    // Keep existing scroll and recalc maxScroll based on totalHeight
+                    const totalHeight = troikaText.userData.totalHeight || newVisibleHeight;
+                    const maxScroll = Math.max(0, totalHeight - newVisibleHeight);
+                    nodeEntry.model.maxScroll = maxScroll;
+
+                    // Clamp scroll position
+                    let scrollY = troikaText.userData.scrollY || 0;
+                    if (scrollY > maxScroll) {
+                        scrollY = maxScroll;
+                        troikaText.userData.scrollY = scrollY;
+                    }
+
+                    // Update clipRect - clip to visible area only
+                    const clipTop = -scrollY;
+                    const clipBottom = -scrollY - newVisibleHeight;
+                    troikaText.clipRect = [0, clipBottom, newTextWidth, clipTop];
+                    troikaText.sync();
+
+                    // Update scrollbar - show/hide based on whether scrolling is needed
+                    const scrollbarTrack = group.getObjectByName('scrollbarTrack');
+                    const scrollbarThumb = group.getObjectByName('scrollbarThumb');
+                    const isCssMode = nodeEntry.currentType === 'CSS';
+
+                    if (scrollbarTrack && scrollbarThumb) {
+                        // Keep native CSS scrollbar as the single source of truth in CSS mode.
+                        if (isCssMode || maxScroll <= 0) {
+                            scrollbarTrack.visible = false;
+                            scrollbarThumb.visible = false;
+                        } else {
+                            scrollbarTrack.visible = true;
+                            scrollbarThumb.visible = true;
+
+                            const SCROLLBAR_WIDTH = 6;
+                            const SCROLLBAR_PADDING = 4;
+                            const SCROLLBAR_TOP_MARGIN = 16;
+                            const SCROLLBAR_BOTTOM_MARGIN = 16;
+                            const SCROLLBAR_RADIUS = 3;
+                            const trackHeight = newHeight - SCROLLBAR_TOP_MARGIN - SCROLLBAR_BOTTOM_MARGIN - filenameHeight; // ★ Include filenameHeight
+                            const trackX = newWidth - SCROLLBAR_WIDTH - SCROLLBAR_PADDING;
+                            const trackY = -SCROLLBAR_TOP_MARGIN - filenameHeight; // ★ Include filenameHeight
+
+                            // Update track position and geometry
+                            scrollbarTrack.position.set(trackX, trackY, 3);
+                            if (scrollbarTrack.geometry) {
+                                scrollbarTrack.geometry.dispose();
+                                if (window.MindMapObjectManager?.createRoundedRectFilledGeometry) {
+                                    scrollbarTrack.geometry = window.MindMapObjectManager.createRoundedRectFilledGeometry(SCROLLBAR_WIDTH, trackHeight, SCROLLBAR_RADIUS);
+                                } else {
+                                    scrollbarTrack.geometry = new THREE.PlaneGeometry(SCROLLBAR_WIDTH, trackHeight);
+                                }
+                            }
+
+                            // Update thumb
+                            const thumbHeightRatio = Math.min(1, newVisibleHeight / (maxScroll + newVisibleHeight));
+                            const thumbHeight = Math.max(24, trackHeight * thumbHeightRatio);
+                            const scrollRatio = scrollY / maxScroll;
+                            const thumbTravel = trackHeight - thumbHeight;
+                            const thumbY = trackY - (scrollRatio * thumbTravel); // ★ Use trackY which includes filenameHeight
+
+                            scrollbarThumb.position.set(trackX, thumbY, 3.1);
+                            if (scrollbarThumb.geometry) {
+                                scrollbarThumb.geometry.dispose();
+                                if (window.MindMapObjectManager?.createRoundedRectFilledGeometry) {
+                                    scrollbarThumb.geometry = window.MindMapObjectManager.createRoundedRectFilledGeometry(SCROLLBAR_WIDTH, thumbHeight, SCROLLBAR_RADIUS);
+                                } else {
+                                    scrollbarThumb.geometry = new THREE.PlaneGeometry(SCROLLBAR_WIDTH, thumbHeight);
+                                }
+                            }
+                            scrollbarThumb.userData.trackHeight = trackHeight;
+                            scrollbarThumb.userData.thumbHeight = thumbHeight;
+                        }
+                    }
+                }
+            }
+            // ▲▲▲ [New] ▲▲▲
+
+            // ▼▼▼ [New] Update glow shader dimensions on resize ▼▼▼
+            if (ENABLE_WEBGL_GLOW && glowMesh && window.MindMapGlowShader?.updateGlowSize) {
+                window.MindMapGlowShader.updateGlowSize(glowMesh, nodeEntry.model.width, nodeEntry.model.height, nodeEntry.model.contentType);
+            }
+            // ▲▲▲ [New] ▲▲▲
+
+            group.userData.worldWidth = nodeEntry.model.width;
+            group.userData.worldHeight = nodeEntry.model.height;
+        }
+
+        // ▼▼▼ [Fix] LOD 모드에서 리사이즈 시 InstancedMesh 실시간 업데이트 ▼▼▼
+        if (module.lodRenderer?.isInLODMode && module.lodRenderer?.requestResidentPatch) {
+            module.lodRenderer.requestResidentPatch('update-node', nodeId);
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+    }
+
+    function debouncedProcessRenderQueue(module, nodeId, updateData) {
+        if (debounceTimers.has(nodeId)) {
+            clearTimeout(debounceTimers.get(nodeId));
+        }
+        window.MindMapNodes.pendingNodeUpdates.set(nodeId, updateData);
+        const timer = setTimeout(() => {
+            enqueueRender(module, nodeId);
+            debounceTimers.delete(nodeId);
+        }, 100);
+        debounceTimers.set(nodeId, timer);
+    }
+
+    function throttledProcessRenderQueueDuringResize(module, nodeId, updateData) {
+        const now = performance.now();
+        const lastCallTime = lastResizeUpdateCall.get(nodeId) || 0;
+
+        if (now - lastCallTime < THROTTLE_INTERVAL) {
+            window.MindMapNodes.pendingNodeUpdates.set(nodeId, updateData);
+            if (resizeThrottleTimers.has(nodeId)) return;
+            const timer = setTimeout(() => {
+                const queuedUpdateData = window.MindMapNodes.pendingNodeUpdates.get(nodeId);
+                if (queuedUpdateData) {
+                    enqueueRender(module, nodeId);
+                }
+                resizeThrottleTimers.delete(nodeId);
+            }, THROTTLE_INTERVAL);
+            resizeThrottleTimers.set(nodeId, timer);
+            return;
+        }
+
+        lastResizeUpdateCall.set(nodeId, now);
+        window.MindMapNodes.pendingNodeUpdates.set(nodeId, updateData);
+        enqueueRender(module, nodeId);
+
+        // ▼▼▼ [Fix] Maintain appropriate resize cursor during doResizing ▼▼▼
+        let cursor = 'nwse-resize';
+        switch (corner) {
+            case 'TL': case 'BR': cursor = 'nwse-resize'; break;
+            case 'TR': case 'BL': cursor = 'nesw-resize'; break;
+            case 'T': case 'B': cursor = 'ns-resize'; break;
+            case 'L': case 'R': cursor = 'ew-resize'; break;
+        }
+        document.body.style.cursor = cursor;
+        // ▲▲▲ [Fix] ▲▲▲
+    }
+
+    function throttledScrollUpdate(module, nodeId, scrollDelta) {
+        const now = performance.now();
+        const lastCallTime = lastScrollCall.get(nodeId) || 0;
+
+        if (now - lastCallTime < THROTTLE_INTERVAL) {
+            return;
+        }
+        lastScrollCall.set(nodeId, now);
+
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) return;
+
+        const model = nodeEntry.model;
+        const oldOffset = model.scrollOffset || 0;
+        const maxScroll = model.maxScroll || 0;
+        const newOffset = Math.max(0, Math.min(oldOffset + scrollDelta, maxScroll));
+
+        if (Math.abs(newOffset - oldOffset) < 0.1) return;
+
+        model.scrollOffset = newOffset;
+        window.MindMapCss3DManager?.syncCss3dScrollFromModel?.(module, nodeId);
+
+        // ▼▼▼ [New] Code nodes: update Troika text via scrollCodeText ▼▼▼
+        if (model.contentType === 'code' && nodeEntry.glObject) {
+            const troikaText = nodeEntry.glObject.userData.troikaText;
+            if (troikaText && window.MindMapTroikaText?.scrollCodeText) {
+                // Use scrollCodeText which handles both position and clipRect
+                const scrollResult = window.MindMapTroikaText.scrollCodeText(troikaText, scrollDelta);
+                if (scrollResult) {
+                    model.scrollOffset = scrollResult.scrollY;
+
+                    // ★ Update scrollbar thumb position (ShapeGeometry anchor is top-left, not center)
+                    const scrollbarThumb = nodeEntry.glObject.getObjectByName('scrollbarThumb');
+                    if (scrollbarThumb && scrollResult.maxScroll > 0) {
+                        const thumbData = scrollbarThumb.userData;
+                        const thumbTravel = thumbData.trackHeight - thumbData.thumbHeight;
+                        const thumbY = -thumbData.topMargin - (scrollResult.scrollRatio * thumbTravel);
+                        scrollbarThumb.position.y = thumbY;
+                    }
+                }
+
+                // Persist scroll position to C#
+                throttledUpdateScrollInCSharp(module, nodeId, model.scrollOffset);
+                return;
+            }
+        }
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [Refactor] Fetch content directly from C# (no cache) ▼▼▼
+        if (model.isChunkedText && module.dotNetHelper) {
+            // Cancel the previous request (process only the latest)
+            if (model._scrollFetchController) {
+                model._scrollFetchController.abort = true;
+            }
+            const controller = { abort: false };
+            model._scrollFetchController = controller;
+
+            // Debounce: render after scrolling stops
+            if (model._scrollDebounceTimer) {
+                clearTimeout(model._scrollDebounceTimer);
+            }
+            model._scrollDebounceTimer = setTimeout(async () => {
+                if (controller.abort) return;
+
+                try {
+                    const result = await module.dotNetHelper.invokeMethodAsync(
+                        'GetTextByScrollPosition',
+                        nodeId,
+                        model.scrollOffset,
+                        model.height || 400,
+                        CHUNK_LINE_HEIGHT
+                    );
+
+                    if (controller.abort || !result) return;
+
+                    // Set content used for rendering
+                    model._visibleContent = result.content;
+                    model._visibleScrollOffset = result.relativeScrollOffset;
+
+                    window.MindMapNodes.pendingNodeUpdates.set(nodeId, {
+                        content: result.content,
+                        width: model.width,
+                        height: model.height,
+                        scrollDelta: 0
+                    });
+                    enqueueRender(module, nodeId);
+                } catch (e) {
+                    console.error(`[Pipeline] GetTextByScrollPosition error:`, e);
+                }
+            }, 16); // 16ms - 60fps throttle
+
+            // Persist scroll position to C#
+            throttledUpdateScrollInCSharp(module, nodeId, model.scrollOffset);
+            return;
+        }
+        // ▲▲▲ [Refactor] ▲▲▲
+
+        // Regular nodes (non-chunked)
+        const updateData = {
+            content: model.response,
+            width: model.width,
+            height: model.height,
+            scrollDelta: 0
+        };
+        window.MindMapNodes.pendingNodeUpdates.set(nodeId, updateData);
+        enqueueRender(module, nodeId);
+
+        // ▼▼▼ [New] Persist scroll position for regular nodes too ▼▼▼
+        throttledUpdateScrollInCSharp(module, nodeId, model.scrollOffset);
+        // ▲▲▲ [New] ▲▲▲
+    }
+
+    // ▼▼▼ [New] Set absolute scroll position (for scrollbar drag) ▼▼▼
+    function setScrollPosition(module, nodeId, absoluteScrollPosition) {
+        const now = performance.now();
+        const lastCallTime = lastScrollCall.get(nodeId) || 0;
+
+        // Throttling (ignore calls that arrive too quickly)
+        if (now - lastCallTime < THROTTLE_INTERVAL) {
+            return;
+        }
+        lastScrollCall.set(nodeId, now);
+
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) return;
+
+        const model = nodeEntry.model;
+        const oldOffset = model.scrollOffset || 0;
+        const maxScroll = model.maxScroll || 0;
+        const newOffset = Math.max(0, Math.min(absoluteScrollPosition, maxScroll));
+
+        if (Math.abs(newOffset - oldOffset) < 0.1) return;
+
+        model.scrollOffset = newOffset;
+        window.MindMapCss3DManager?.syncCss3dScrollFromModel?.(module, nodeId);
+
+        // ▼▼▼ [Refactor] Fetch content directly from C# (no cache) ▼▼▼
+        if (model.isChunkedText && module.dotNetHelper) {
+            // Cancel the previous request (process only the latest)
+            if (model._scrollFetchController) {
+                model._scrollFetchController.abort = true;
+            }
+            const controller = { abort: false };
+            model._scrollFetchController = controller;
+
+            // Throttle: update every 16ms even during fast scrolling (~60fps)
+            if (model._scrollDebounceTimer) {
+                clearTimeout(model._scrollDebounceTimer);
+            }
+            model._scrollDebounceTimer = setTimeout(async () => {
+                if (controller.abort) return;
+
+                try {
+                    const result = await module.dotNetHelper.invokeMethodAsync(
+                        'GetTextByScrollPosition',
+                        nodeId,
+                        model.scrollOffset,
+                        model.height || 400,
+                        CHUNK_LINE_HEIGHT
+                    );
+
+                    if (controller.abort || !result) return;
+
+                    // Set content used for rendering
+                    model._visibleContent = result.content;
+                    model._visibleScrollOffset = result.relativeScrollOffset;
+
+                    window.MindMapNodes.pendingNodeUpdates.set(nodeId, {
+                        content: result.content,
+                        width: model.width,
+                        height: model.height,
+                        scrollDelta: 0
+                    });
+                    enqueueRender(module, nodeId);
+                } catch (e) {
+                    console.error(`[Pipeline] GetTextByScrollPosition error:`, e);
+                }
+            }, 16); // 16ms - 60fps throttle
+
+            // Persist scroll position to C#
+            throttledUpdateScrollInCSharp(module, nodeId, model.scrollOffset);
+            return;
+        }
+        // ▲▲▲ [Refactor] ▲▲▲
+
+        // Regular nodes (non-chunked)
+        const updateData = {
+            content: model.response,
+            width: model.width,
+            height: model.height,
+            scrollDelta: 0
+        };
+        window.MindMapNodes.pendingNodeUpdates.set(nodeId, updateData);
+        enqueueRender(module, nodeId);
+
+        // ▼▼▼ [New] Persist scroll position for regular nodes too ▼▼▼
+        throttledUpdateScrollInCSharp(module, nodeId, model.scrollOffset);
+        // ▲▲▲ [New] ▲▲▲
+    }
+    // ▲▲▲ [New] Set absolute scroll position (for scrollbar drag) ▲▲▲
+
+    function throttledUpdateScrollInCSharp(module, nodeId, scrollOffset) {
+        if (scrollUpdateThrottleTimers.has(nodeId)) {
+            clearTimeout(scrollUpdateThrottleTimers.get(nodeId));
+        }
+        const timer = setTimeout(() => {
+            try {
+                module.dotNetHelper?.invokeMethodAsync('UpdateNodeScroll', nodeId, scrollOffset);
+            } catch (e) {
+                console.error(`[Pipeline] Failed to update scroll in C# for node ${nodeId}:`, e);
+            }
+            scrollUpdateThrottleTimers.delete(nodeId);
+        }, 100);
+        scrollUpdateThrottleTimers.set(nodeId, timer);
+    }
+
+    async function stopResizing(module) {
+        if (!module.isResizing || !module.resizeNodeObject) return;
+
+        // ▼▼▼ [Changed] Use stored nodeId (CSS3D mode compatible) ▼▼▼
+        const nodeId = module.resizingNodeId || (module.resizeNodeObject.userData?.nodeId || module.resizeNodeObject.element?.dataset?.nodeId);
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+
+        if (nodeEntry && module.dotNetHelper) {
+            const currentPosX = nodeEntry.glObject?.position?.x ?? nodeEntry.cssObject?.position?.x ?? 0;
+            const currentPosY = nodeEntry.glObject?.position?.y ?? nodeEntry.cssObject?.position?.y ?? 0;
+            let finalPosX = currentPosX;
+            let finalPosY = currentPosY;
+
+            // Respect global snap toggle. Resize itself stays free-form while dragging;
+            // snapping is applied only at the end when enabled.
+            if (module.gridSnapEnabled !== false) {
+                const GRID_SIZE = module.GRID_SIZE || 10;
+                nodeEntry.model.width = Math.round(nodeEntry.model.width / GRID_SIZE) * GRID_SIZE;
+                nodeEntry.model.height = Math.round(nodeEntry.model.height / GRID_SIZE) * GRID_SIZE;
+                finalPosX = Math.round(currentPosX / GRID_SIZE) * GRID_SIZE;
+                finalPosY = Math.round(currentPosY / GRID_SIZE) * GRID_SIZE;
+            }
+
+            if (nodeEntry.glObject) {
+                nodeEntry.glObject.position.x = finalPosX;
+                nodeEntry.glObject.position.y = finalPosY;
+            }
+            if (nodeEntry.cssObject) {
+                nodeEntry.cssObject.position.x = finalPosX;
+                nodeEntry.cssObject.position.y = finalPosY;
+                nodeEntry.cssObject.updateMatrixWorld(true);
+
+                // ▼▼▼ [Fix] 그리드 스냅 후 CSS3D DOM 크기도 업데이트 ▼▼▼
+                const wrapper = nodeEntry.cssObject.element;
+                if (wrapper) {
+                    const resolutionScale = nodeEntry.cssObject.userData?.resolutionScale || 1;
+                    const domWidth = nodeEntry.model.width * resolutionScale;
+                    const domHeight = nodeEntry.model.height * resolutionScale;
+
+                    wrapper.style.width = domWidth + 'px';
+                    wrapper.style.height = domHeight + 'px';
+                    wrapper.style.minWidth = domWidth + 'px';
+                    wrapper.style.minHeight = domHeight + 'px';
+                    wrapper.style.maxWidth = domWidth + 'px';
+                    wrapper.style.maxHeight = domHeight + 'px';
+
+                    const innerContent = wrapper.firstElementChild;
+                    if (innerContent) {
+                        innerContent.style.width = nodeEntry.model.width + 'px';
+                        innerContent.style.height = nodeEntry.model.height + 'px';
+                        innerContent.style.minWidth = nodeEntry.model.width + 'px';
+                        innerContent.style.minHeight = nodeEntry.model.height + 'px';
+                        innerContent.style.maxWidth = nodeEntry.model.width + 'px';
+                        innerContent.style.maxHeight = nodeEntry.model.height + 'px';
+
+                        // ▼▼▼ [Fix] 이미지 노드의 경우 내부 img 요소 크기도 업데이트 ▼▼▼
+                        if (nodeEntry.model.contentType === 'image') {
+                            const imgEl = innerContent.querySelector('img');
+                            if (imgEl) {
+                                imgEl.style.width = '100%';
+                                imgEl.style.height = '100%';
+                            }
+                            const contentWrapper = innerContent.querySelector('.node-content-wrapper');
+                            if (contentWrapper) {
+                                contentWrapper.style.width = '100%';
+                                contentWrapper.style.height = '100%';
+                            }
+                            const responseDiv = innerContent.querySelector('.node-response');
+                            if (responseDiv) {
+                                responseDiv.style.width = '100%';
+                                responseDiv.style.height = '100%';
+                            }
+                        }
+                        // ▲▲▲ [Fix] ▲▲▲
+                    }
+
+                    // userData 업데이트
+                    nodeEntry.cssObject.userData.worldWidth = nodeEntry.model.width;
+                    nodeEntry.cssObject.userData.worldHeight = nodeEntry.model.height;
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+            }
+            try {
+                await module.dotNetHelper.invokeMethodAsync(
+                    'UpdateNodeDimensions',
+                    nodeId,
+                    Math.round(nodeEntry.model.width),
+                    Math.round(nodeEntry.model.height)
+                );
+                // ▼▼▼ [Changed] Also update position in C# ▼▼▼
+                await module.dotNetHelper.invokeMethodAsync(
+                    'UpdateNodePosition',
+                    nodeId,
+                    Math.round(finalPosX),
+                    Math.round(finalPosY)
+                );
+                // ▲▲▲ [Changed] ▲▲▲
+            } catch (e) {
+                console.error('[MindMapPipeline] Error updating dimensions/position:', e);
+            }
+
+            if (window.MindMapCss3DManager?.syncAgentPlanStack) {
+                try {
+                    await window.MindMapCss3DManager.syncAgentPlanStack(module, nodeId, { persist: true });
+                } catch (error) {
+                    console.warn('[MindMapPipeline] Failed to sync agent plan stack after resize:', error);
+                }
+            }
+
+            // ▼▼▼ [UndoRedo] Record resize command after dimensions/position are persisted ▼▼▼
+            try { await module.dotNetHelper.invokeMethodAsync('EndResizeWithUndo'); } catch { }
+            // ▲▲▲ [UndoRedo] ▲▲▲
+
+            if (nodeEntry.glObject) {
+                const outline = nodeEntry.glObject.getObjectByName('outline');
+                let glowMesh = nodeEntry.glObject.getObjectByName('glow');
+                if (!ENABLE_WEBGL_GLOW) {
+                    glowMesh = removeGlowMesh(nodeEntry.glObject);
+                }
+                const bodyMesh = nodeEntry.glObject.getObjectByName('body');
+                const isSelected = module.multiSelectedNodeIds.has(nodeId) || module.selectedNodeIdJs === nodeId;
+
+                // ▼▼▼ [Fix] 그리드 스냅 후 body mesh 크기/위치 업데이트 ▼▼▼
+                if (bodyMesh) {
+                    bodyMesh.geometry.dispose();
+                    bodyMesh.geometry = new THREE.PlaneGeometry(nodeEntry.model.width, nodeEntry.model.height);
+                    bodyMesh.position.set(nodeEntry.model.width / 2, -nodeEntry.model.height / 2, 0);
+                    if (nodeEntry.model.contentType === 'image') {
+                        applyImageCoverUv(bodyMesh, nodeEntry.model.width, nodeEntry.model.height);
+                    }
+                    // ▼▼▼ [Fix] CSS 모드에서 body mesh 숨김 유지 (이중 렌더링 방지) ▼▼▼
+                    if (nodeEntry.currentResizeType === 'CSS') {
+                        bodyMesh.visible = false;
+                    }
+                    // ▲▲▲ [Fix] ▲▲▲
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+
+                if (nodeEntry.model.contentType === 'image') {
+                    const usesCssViewAfterResize =
+                        nodeEntry.currentResizeType === 'CSS' ||
+                        (nodeEntry.currentType === 'CSS' && !!nodeEntry.cssObject?.visible);
+                    syncImageSelectionGlow(
+                        nodeEntry.glObject,
+                        nodeEntry.model.width,
+                        nodeEntry.model.height,
+                        nodeEntry.glObject.userData?.baseRenderOrder ?? bodyMesh?.renderOrder ?? 0,
+                        isSelected && !usesCssViewAfterResize
+                    );
+                    window.MindMapNodes?.syncImageMidLodDecorations?.(
+                        nodeEntry.glObject,
+                        nodeEntry.model.width,
+                        nodeEntry.model.height,
+                        nodeEntry.glObject.userData?.baseRenderOrder ?? bodyMesh?.renderOrder ?? 0,
+                        isSelected,
+                        usesCssViewAfterResize
+                            ? { edgeVisible: false, glowVisible: false }
+                            : undefined
+                    );
+                } else if (outline && outline.material) {
+                    outline.material.color.setHex(isSelected ? 0x7b7ff2 : 0x374151);
+                    outline.visible = false; // Disabled - using SDF glow instead
+                }
+
+                // ▼▼▼ [Changed] After resizing, update glow using SDF shader ▼▼▼
+                if (ENABLE_WEBGL_GLOW && glowMesh && window.MindMapGlowShader?.updateGlowSize) {
+                    const contentType = nodeEntry.model.contentType || 'text';
+                    window.MindMapGlowShader.updateGlowSize(glowMesh, nodeEntry.model.width, nodeEntry.model.height, contentType);
+                    glowMesh.position.set(
+                        nodeEntry.model.width / 2,
+                        -nodeEntry.model.height / 2,
+                        0
+                    );
+                    // ★ 카메라 거리에 따라 가시성 설정
+                    const cameraZ = module.camera?.position?.z ?? Infinity;
+                    const threshold = 4000;
+                    glowMesh.visible = cameraZ < threshold;
+                }
+                // ▲▲▲ [Changed] ▲▲▲
+
+                // ▼▼▼ [Fix] 리사이즈 종료 후 8방향 핸들 위치 업데이트 ▼▼▼
+                const HANDLE_SIZE = RESIZE_HANDLE_SIZE;
+                const w = nodeEntry.model.width;
+                const h = nodeEntry.model.height;
+                const edgeWidthLength = Math.max(10, w - HANDLE_SIZE * 2);
+                const edgeHeightLength = Math.max(10, h - HANDLE_SIZE * 2);
+                const handleConfigs = {
+                    // Corners
+                    'resizeHandle_TL': { x: HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                    'resizeHandle_TR': { x: w - HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                    'resizeHandle_BL': { x: HANDLE_SIZE / 2, y: -h + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 },
+                    'resizeHandle_BR': { x: w - HANDLE_SIZE / 2, y: -h + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE, z: 0 }
+                };
+                if (nodeEntry.model.contentType !== 'image') {
+                    Object.assign(handleConfigs, {
+                        'resizeHandle_T': { x: w / 2, y: -HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 0 },
+                        'resizeHandle_B': { x: w / 2, y: -h + HANDLE_SIZE / 2, w: edgeWidthLength, h: HANDLE_SIZE, z: 0 },
+                        'resizeHandle_L': { x: HANDLE_SIZE / 2, y: -h / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 0 },
+                        'resizeHandle_R': { x: w - HANDLE_SIZE / 2, y: -h / 2, w: HANDLE_SIZE, h: edgeHeightLength, z: 0 }
+                    });
+                }
+                ['resizeHandle_TL', 'resizeHandle_TR', 'resizeHandle_BL', 'resizeHandle_BR', 'resizeHandle_T', 'resizeHandle_B', 'resizeHandle_L', 'resizeHandle_R'].forEach(name => {
+                    const handle = nodeEntry.glObject.getObjectByName(name);
+                    const cfg = handleConfigs[name];
+                    if (!handle) {
+                        return;
+                    }
+                    if (!cfg) {
+                        handle.visible = false;
+                        return;
+                    }
+                    handle.position.set(cfg.x, cfg.y, cfg.z);
+                    const gp = handle.geometry?.parameters;
+                    if (gp && (gp.width !== cfg.w || gp.height !== cfg.h)) {
+                        handle.geometry.dispose();
+                        handle.geometry = new THREE.PlaneGeometry(cfg.w, cfg.h);
+                    }
+                    if (nodeEntry.model.contentType === 'image' && handle.material) {
+                        handle.material.opacity = 0.0;
+                        handle.material.colorWrite = false;
+                        handle.material.needsUpdate = true;
+                    }
+                });
+                // ▲▲▲ [Fix] ▲▲▲
+            }
+
+            if (debounceTimers.has(nodeId)) {
+                clearTimeout(debounceTimers.get(nodeId));
+                debounceTimers.delete(nodeId);
+            }
+            if (resizeThrottleTimers.has(nodeId)) {
+                clearTimeout(resizeThrottleTimers.get(nodeId));
+                resizeThrottleTimers.delete(nodeId);
+            }
+
+            if (nodeEntry.currentResizeType === 'CSS') {
+                console.log(`[stopResizing] CSS type - queuing texture update for ${nodeId}`);
+
+                // ▼▼▼ [Fix] CSS3D 노드의 최종 크기를 resolutionScale 고려하여 설정 ▼▼▼
+                if (nodeEntry.cssObject && nodeEntry.cssObject.element) {
+                    const wrapper = nodeEntry.cssObject.element;
+                    const resolutionScale = nodeEntry.cssObject.userData?.resolutionScale || 1;
+                    const domWidth = nodeEntry.model.width * resolutionScale;
+                    const domHeight = nodeEntry.model.height * resolutionScale;
+
+                    wrapper.style.width = domWidth + 'px';
+                    wrapper.style.height = domHeight + 'px';
+                    wrapper.style.minWidth = domWidth + 'px';
+                    wrapper.style.minHeight = domHeight + 'px';
+                    wrapper.style.maxWidth = domWidth + 'px';
+                    wrapper.style.maxHeight = domHeight + 'px';
+
+                    const innerContent = wrapper.firstElementChild;
+                    if (innerContent) {
+                        innerContent.style.width = nodeEntry.model.width + 'px';
+                        innerContent.style.height = nodeEntry.model.height + 'px';
+                        innerContent.style.minWidth = nodeEntry.model.width + 'px';
+                        innerContent.style.minHeight = nodeEntry.model.height + 'px';
+                        innerContent.style.maxWidth = nodeEntry.model.width + 'px';
+                        innerContent.style.maxHeight = nodeEntry.model.height + 'px';
+                    }
+
+                    // userData 업데이트
+                    nodeEntry.cssObject.userData.worldWidth = nodeEntry.model.width;
+                    nodeEntry.cssObject.userData.worldHeight = nodeEntry.model.height;
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+
+                if (window.MindMapCss3DManager?.syncCss3dContent && nodeEntry.cssObject) {
+                    try {
+                        window.MindMapCss3DManager.syncCss3dContent(nodeEntry.model, nodeEntry.cssObject);
+                    } catch (error) {
+                        console.warn(`[stopResizing] Failed to sync CSS3D content after resize for ${nodeId}`, error);
+                    }
+                }
+
+                window.MindMapTextOverlayV2?.updateNodePlacement?.(module, nodeId);
+                window.MindMapTextOverlayV2?.invalidateNode?.(module, nodeId, 'layout');
+                module._overlayDirty = true;
+                module._lastOverlayKey = '';
+
+                const textarea = nodeEntry.cssObject.element.querySelector('textarea');
+                if (textarea) {
+                    window.MindMapNodes.pendingNodeUpdates.set(nodeId, {
+                        content: textarea.value,
+                        width: nodeEntry.model.width,
+                        height: nodeEntry.model.height
+                    });
+                    enqueueRender(module, nodeId);
+                }
+            } else if (nodeEntry.currentResizeType === 'GL') {
+                // ▼▼▼ [Refactor] After resizing a chunk node, fetch content directly from C# ▼▼▼
+                if (nodeEntry.model.isChunkedText && module.dotNetHelper) {
+                    try {
+                        const result = await module.dotNetHelper.invokeMethodAsync(
+                            'GetTextByScrollPosition',
+                            nodeId,
+                            nodeEntry.model.scrollOffset || 0,
+                            nodeEntry.model.height || 400,
+                            CHUNK_LINE_HEIGHT
+                        );
+
+                        if (result) {
+                            nodeEntry.model._visibleContent = result.content;
+                            nodeEntry.model._visibleScrollOffset = result.relativeScrollOffset;
+
+                            window.MindMapNodes.pendingNodeUpdates.set(nodeId, {
+                                content: result.content,
+                                width: nodeEntry.model.width,
+                                height: nodeEntry.model.height,
+                                scrollDelta: 0
+                            });
+                            enqueueRender(module, nodeId);
+                        }
+                    } catch (e) {
+                        console.error(`[Pipeline] GetTextByScrollPosition error on resize:`, e);
+                    }
+                } else {
+                    // ▲▲▲ [Refactor] ▲▲▲
+                    // Regular nodes (non-chunked) + IMAGE NODES
+
+                    // ▼▼▼ [Fix] 이미지 노드 리사이즈 시 기존 텍스처 유지 ▼▼▼
+                    if (nodeEntry.model.contentType === 'image') {
+                        // 이미지 노드는 URL이 변하지 않으므로 텍스처 재생성 불필요
+                        // geometry만 업데이트하고 기존 텍스처를 유지
+                        const bodyMesh = nodeEntry.glObject?.getObjectByName('body');
+                        if (bodyMesh && bodyMesh.material.map) {
+                            // 기존 텍스처 유지 - 아무것도 하지 않음
+                            console.log(`[stopResizing] Image node ${nodeId} - keeping existing texture`);
+                        } else {
+                            console.warn(`[stopResizing] Image node ${nodeId} - no texture found, may need reload`);
+                        }
+                    } else {
+                        // [Fix] Ensure regular nodes have content for texture generation
+                        const content = nodeEntry.model.response;
+
+                        console.log(`[stopResizing] GL type - queuing texture update for ${nodeId}, size ${nodeEntry.model.width}x${nodeEntry.model.height}`);
+                        window.MindMapNodes.pendingNodeUpdates.set(nodeId, {
+                            content: content,
+                            width: nodeEntry.model.width,
+                            height: nodeEntry.model.height
+                        });
+                        enqueueRender(module, nodeId);
+                    }
+                    // ▲▲▲ [Fix] ▲▲▲
+                }
+            }
+
+            window.MindMapNodes.updateNodeSpatialGrid(module, nodeId);
+
+            // ▼▼▼ [Fix] 리사이즈 종료 후 CSS transition 복원 ▼▼▼
+            if (nodeEntry.cssObject && nodeEntry.cssObject.element) {
+                const wrapper = nodeEntry.cssObject.element;
+                wrapper.style.transition = CSS3D_WRAPPER_TRANSITION;
+                wrapper.style.webkitTransition = CSS3D_WRAPPER_WEBKIT_TRANSITION;
+                const inner = wrapper.firstElementChild;
+                if (inner) {
+                    inner.style.transition = 'none';
+                    inner.style.webkitTransition = 'none';
+                }
+            }
+            // ▲▲▲ [Fix] ▲▲▲
+        }
+
+        module.isResizing = false;
+        module.resizeNodeObject = null;
+        module.resizingNodeId = null; // ▼▼▼ [Changed] clear resizingNodeId ▼▼▼
+        window.MindMapInteractions?.setBrowserSelectionLock?.(false, 'resize');
+        document.body.classList.remove('is-resizing');
+
+        // ▼▼▼ [Fix] Reset cursor after resizing ▼▼▼
+        document.body.style.cursor = '';
+        // ▲▲▲ [Fix] ▲▲▲
+    }
+
+    // Expose MindMapPipeline globally
+    window.MindMapPipeline = {
+        processRenderQueue: processRenderQueue,
+        debouncedProcessRenderQueue: debouncedProcessRenderQueue,
+        throttledScrollUpdate: throttledScrollUpdate,
+        setScrollPosition: setScrollPosition, // [New] for scrollbar dragging
+        throttledProcessRenderQueueDuringResize: throttledProcessRenderQueueDuringResize,
+        startResizing: startResizing,
+        doResizing: doResizing,
+        stopResizing: stopResizing,
+        throttledUpdateScrollInCSharp: throttledUpdateScrollInCSharp
+    };
+
+    console.log('? mind-map-pipeline.js loaded');
+})();
+