@mindexec/cli 0.2.445 → 0.2.447

package/wwwroot/_content/MindExecution.Shared/js/mind-map-lod-renderer.js

@@ -51,7 +51,7 @@
     // ▲▲▲ [Usage] ▲▲▲
 
     // Procedural line rendering settings
-    const LOD_RENDERER_BUILD_ID = '20260713-normal-boundary-delta-v844';
+    const LOD_RENDERER_BUILD_ID = '20260725-cold-mid-line-restore-v846';
     const DirtyKind = Object.freeze({
         ResidentFullRebuild: 'resident-full-rebuild',
         ResidentPatch: 'resident-patch',
@@ -585,7 +585,14 @@
             return !isAnimatedGifImageModel(model);
         }
 
-        if (contentType !== 'embed' && contentType !== 'video') {
+        // Every video needs a resident MID/FAR visual. Videos without an
+        // explicit preview use a lightweight atlas placeholder so the live
+        // <video> element can stay suspended without making the node vanish.
+        if (contentType === 'video') {
+            return true;
+        }
+
+        if (contentType !== 'embed') {
             return false;
         }
 
@@ -1255,6 +1262,33 @@
             return [invAtlas, invAtlas, invAtlas, invAtlas];
         }
 
+        _getOrCreateImageAtlasSlot(nodeId) {
+            const normalizedId = String(nodeId || '').trim();
+            if (!normalizedId) {
+                return null;
+            }
+
+            let slot = this.imageAtlasSlots.get(normalizedId) || null;
+            if (slot) {
+                return slot;
+            }
+
+            const slotIndex = this._allocateImageAtlasSlot();
+            if (slotIndex < 0) {
+                return null;
+            }
+
+            slot = {
+                slotIndex,
+                key: '',
+                uvRect: this._getImageAtlasUvRect(slotIndex),
+                ready: false,
+                unsupported: false
+            };
+            this.imageAtlasSlots.set(normalizedId, slot);
+            return slot;
+        }
+
         _compactImageAtlasLoadQueue(force = false) {
             const cursor = this._imageAtlasLoadCursor || 0;
             if (cursor <= 0) return;
@@ -1653,35 +1687,114 @@
             }
         }
 
+        _drawVideoLodPlaceholder(slot, nodeWidth, nodeHeight) {
+            if (!slot || !this.imageAtlasCanvas || typeof document === 'undefined') {
+                return false;
+            }
+
+            const ctx = this.imageAtlasCanvas.getContext('2d', { alpha: false });
+            if (!ctx) {
+                return false;
+            }
+
+            const columns = this.imageAtlasColumns || IMAGE_LOD_ATLAS_COLUMNS;
+            const col = slot.slotIndex % columns;
+            const row = Math.floor(slot.slotIndex / columns);
+            const x = col * IMAGE_LOD_THUMBNAIL_SIZE;
+            const y = row * IMAGE_LOD_THUMBNAIL_SIZE;
+            const size = IMAGE_LOD_THUMBNAIL_SIZE;
+            const safeWidth = Math.max(1, Number(nodeWidth || 300));
+            const safeHeight = Math.max(1, Number(nodeHeight || 300));
+            const targetAspect = safeWidth / safeHeight;
+
+            try {
+                ctx.save();
+
+                const background = ctx.createLinearGradient(x, y, x, y + size);
+                background.addColorStop(0, '#26364d');
+                background.addColorStop(1, '#0f172a');
+                ctx.fillStyle = background;
+                ctx.fillRect(x, y, size, size);
+
+                const inset = 4;
+                ctx.strokeStyle = 'rgba(148, 163, 184, 0.58)';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(x + inset, y + inset, size - inset * 2, size - inset * 2);
+
+                // Pre-compensate the icon for the square atlas tile being
+                // stretched to the video's world-space aspect ratio.
+                const radiusX = size * 0.19;
+                const radiusY = Math.min(size * 0.34, radiusX * Math.max(0.55, targetAspect));
+                const centerX = x + size * 0.5;
+                const centerY = y + size * 0.48;
+                ctx.beginPath();
+                ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
+                ctx.fillStyle = 'rgba(255, 255, 255, 0.18)';
+                ctx.fill();
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.62)';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+
+                const triangleWidth = size * 0.13;
+                const triangleHeight = Math.min(size * 0.24, triangleWidth * Math.max(0.85, targetAspect));
+                ctx.beginPath();
+                ctx.moveTo(centerX - triangleWidth * 0.35, centerY - triangleHeight * 0.5);
+                ctx.lineTo(centerX + triangleWidth * 0.7, centerY);
+                ctx.lineTo(centerX - triangleWidth * 0.35, centerY + triangleHeight * 0.5);
+                ctx.closePath();
+                ctx.fillStyle = '#f8fafc';
+                ctx.fill();
+
+                ctx.fillStyle = 'rgba(226, 232, 240, 0.35)';
+                ctx.fillRect(x + size * 0.18, y + size * 0.82, size * 0.64, 2);
+                ctx.fillStyle = 'rgba(248, 250, 252, 0.78)';
+                ctx.fillRect(x + size * 0.18, y + size * 0.82, size * 0.2, 2);
+                ctx.restore();
+
+                if (this.imageAtlasTexture) {
+                    this.imageAtlasTexture.needsUpdate = true;
+                }
+                return true;
+            } catch {
+                try { ctx.restore(); } catch { }
+                return false;
+            }
+        }
+
         _ensureImageLodThumbnail(entry) {
             const nodeId = entry?.model?.id;
             if (!nodeId) {
                 return null;
             }
 
+            const contentType = getNodeContentType(entry?.model);
+            const nodeWidth = Math.max(1, Number(entry?.model?.width || entry?.model?.Width || 300));
+            const nodeHeight = Math.max(1, Number(entry?.model?.height || entry?.model?.Height || 300));
             const source = this._getImageLodSource(entry);
             if (!source) {
+                if (contentType === 'video') {
+                    const placeholderKey = `video-placeholder|node:${Math.round(nodeWidth)}x${Math.round(nodeHeight)}`;
+                    const placeholderSlot = this._getOrCreateImageAtlasSlot(nodeId);
+                    if (!placeholderSlot) {
+                        return null;
+                    }
+                    if (placeholderSlot.ready && placeholderSlot.key === placeholderKey) {
+                        return placeholderSlot;
+                    }
+                    if (this._drawVideoLodPlaceholder(placeholderSlot, nodeWidth, nodeHeight)) {
+                        placeholderSlot.key = placeholderKey;
+                        placeholderSlot.ready = true;
+                        placeholderSlot.unsupported = false;
+                        return placeholderSlot;
+                    }
+                }
                 return null;
             }
 
-            const nodeWidth = Math.max(1, Number(entry?.model?.width || entry?.model?.Width || 300));
-            const nodeHeight = Math.max(1, Number(entry?.model?.height || entry?.model?.Height || 300));
             const sourceKey = `${source.key}|node:${Math.round(nodeWidth)}x${Math.round(nodeHeight)}`;
-
-            let slot = this.imageAtlasSlots.get(nodeId) || null;
+            const slot = this._getOrCreateImageAtlasSlot(nodeId);
             if (!slot) {
-                const slotIndex = this._allocateImageAtlasSlot();
-                if (slotIndex < 0) {
-                    return null;
-                }
-                slot = {
-                    slotIndex,
-                    key: '',
-                    uvRect: this._getImageAtlasUvRect(slotIndex),
-                    ready: false,
-                    unsupported: false
-                };
-                this.imageAtlasSlots.set(nodeId, slot);
+                return null;
             }
 
             if (slot.ready && slot.key === sourceKey) {
@@ -1699,6 +1812,14 @@
                 return slot;
             }
 
+            if (contentType === 'video' &&
+                this._drawVideoLodPlaceholder(slot, nodeWidth, nodeHeight)) {
+                slot.key = `video-placeholder|source:${sourceKey}`;
+                slot.ready = true;
+                slot.unsupported = false;
+                return slot;
+            }
+
             if (source.fetchFallbackOnDrawFailure === true) {
                 slot.key = '';
                 slot.ready = false;
@@ -3340,6 +3461,8 @@
         _hasPendingLineDetailRestore(lodBand = this._currentLodBand) {
             return ENABLE_INSTANCED_TEXT_LINES === true &&
                 this._lineDetailsPatchPending === true &&
+                this._deferLineRestorePending !== true &&
+                this._disableLineRender !== true &&
                 this.isInLODMode === true &&
                 lodBand === 'MID' &&
                 this.isLoading !== true;
@@ -6642,15 +6765,29 @@
 
                 if (disableLines) {
                     const cachedLineData = this.lineDataCache.get(nodeId) || null;
-                    if (cachedLineData) {
-                        lineCounts.push(cachedLineData.lineCount || 0);
-                        lineHeights.push(cachedLineData.lineHeightPx || LINE_HEIGHT_PX);
+                    const deferredLineData = cachedLineData || (
+                        this._deferLineRestorePending === true
+                            ? window.MindMapRenderPlan?.resolveResidentLineData?.(
+                                this,
+                                entry,
+                                w,
+                                h,
+                                false,
+                                MAX_LINE_SAMPLES,
+                                LINE_HEIGHT_PX,
+                                LINE_PADDING_PX
+                            ) || null
+                            : null
+                    );
+                    if (deferredLineData) {
+                        lineCounts.push(deferredLineData.lineCount || 0);
+                        lineHeights.push(deferredLineData.lineHeightPx || LINE_HEIGHT_PX);
                         linePaddings.push(
-                            cachedLineData.paddingX || LINE_PADDING_PX,
-                            cachedLineData.paddingY || LINE_PADDING_PX
+                            deferredLineData.paddingX || LINE_PADDING_PX,
+                            deferredLineData.paddingY || LINE_PADDING_PX
                         );
                         for (let i = 0; i < MAX_LINE_SAMPLES; i++) {
-                            lineLengths.push(cachedLineData.lineLengths?.[i] || 0);
+                            lineLengths.push(deferredLineData.lineLengths?.[i] || 0);
                         }
                     } else {
                         lineCounts.push(0);
@@ -7910,6 +8047,12 @@
                 if (!hasResidentInstances) {
                     this._setInstancesDirty('initial-board-build');
                 }
+                if (shouldDeferLineRestore) {
+                    this._scheduleResidentLodWake(
+                        'post-load-line-restore',
+                        POST_LOAD_LINE_RESTORE_DELAY_MS + 16
+                    );
+                }
                 // ▼▼▼ [UX] Show nodes immediately after loading ends ▼▼▼
                 if (this.instancedHaloMesh) this.instancedHaloMesh.visible = this.isInLODMode === true && shouldShowInstancedHaloInLodBand(this._currentLodBand);
                 if (this.instancedMesh) this.instancedMesh.visible = this.isInLODMode === true;

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

@@ -525,7 +525,7 @@
             return nodeEntry.cssObject.userData.spatialGridKeys;
         }
 
-        return new Set();
+        return null;
     }
 
     function setNodeSpatialGridKeys(nodeEntry, keys) {
@@ -589,7 +589,7 @@
         const bounds = getNodeWorldBounds(nodeEntry);
         if (!bounds) return;
 
-        const oldKeys = getNodeSpatialGridKeys(nodeEntry);
+        const oldKeys = getNodeSpatialGridKeys(nodeEntry) || new Set();
         const newKeys = new Set();
         const startCellX = Math.floor(bounds.minX / module.GRID_CELL_SIZE);
         const endCellX = Math.floor(bounds.maxX / module.GRID_CELL_SIZE);
@@ -789,7 +789,7 @@
         const preservedY = Number(oldGroup?.position?.y ?? model.positionY ?? 0);
         const preservedZ = Number(oldGroup?.position?.z ?? model.positionZ ?? 0);
         const preservedVisible = oldGroup?.visible !== false;
-        const preservedSpatialKeys = new Set(getNodeSpatialGridKeys(nodeEntry));
+        const preservedSpatialKeys = new Set(getNodeSpatialGridKeys(nodeEntry) || []);
         const width = Number(model.width || 400);
         const height = Number(model.height || 200);
 
@@ -846,21 +846,15 @@
     function removeNodeFromSpatialGrid(module, nodeId, nodeEntry = null) {
         if (!module?.spatialGrid || !nodeId) return;
 
-        const keys = getNodeSpatialGridKeys(nodeEntry);
-        if (keys && typeof keys.forEach === 'function') {
-            keys.forEach(key => {
-                const cell = module.spatialGrid.get(key);
-                if (cell) cell.delete(nodeId);
-                if (cell && cell.size === 0) module.spatialGrid.delete(key);
-            });
-            setNodeSpatialGridKeys(nodeEntry, new Set());
-            return;
-        }
-
-        module.spatialGrid.forEach((cell, key) => {
+        const keys = getNodeSpatialGridKeys(nodeEntry)
+            || window.MindMapCss3dHotPath?.getSpatialGridKeysForBounds?.(module, nodeEntry)
+            || new Set();
+        keys.forEach(key => {
+            const cell = module.spatialGrid.get(key);
             if (!cell?.delete?.(nodeId)) return;
             if (cell.size === 0) module.spatialGrid.delete(key);
         });
+        setNodeSpatialGridKeys(nodeEntry, new Set());
     }
     // ▲▲▲ [New] ▲▲▲
 
@@ -927,6 +921,7 @@
             return null;
         }
 
+        const geometryKey = `${Math.round(width)}x${Math.round(height)}:${IMAGE_SELECTION_GLOW_PAD}`;
         if (!outline) {
             outline = new THREE.Mesh(
                 createRoundedRectFilledGeometry(
@@ -943,15 +938,20 @@
                 })
             );
             outline.name = 'outline';
+            outline.userData.geometrySizeKey = geometryKey;
             group.add(outline);
+        } else {
+            window.MindMapCss3dHotPath?.replaceGeometryIfSizeChanged?.(
+                outline,
+                geometryKey,
+                () => createRoundedRectFilledGeometry(
+                    width + IMAGE_SELECTION_GLOW_PAD,
+                    height + IMAGE_SELECTION_GLOW_PAD,
+                    20 + (IMAGE_SELECTION_GLOW_PAD * 0.5)
+                )
+            );
         }
 
-        outline.geometry?.dispose?.();
-        outline.geometry = createRoundedRectFilledGeometry(
-            width + IMAGE_SELECTION_GLOW_PAD,
-            height + IMAGE_SELECTION_GLOW_PAD,
-            20 + (IMAGE_SELECTION_GLOW_PAD * 0.5)
-        );
         outline.position.set(-(IMAGE_SELECTION_GLOW_PAD / 2), IMAGE_SELECTION_GLOW_PAD / 2, 0);
         outline.renderOrder = Math.max(0, (baseRenderOrder || 1) - 1);
         outline.visible = !!isSelected;
@@ -3487,6 +3487,66 @@
         window.MindMapTextOverlayV2?.invalidateView?.(module);
     }
 
+    function applyNodeGlRenderOrder(module, entry, targetBaseOrder) {
+        if (!entry?.glObject) return;
+        const renderables = [];
+        let minOrder = Infinity;
+        let maxOrder = -Infinity;
+        entry.glObject.traverse(child => {
+            if (!child.isMesh && !child.isLine) return;
+            const order = Number(child.renderOrder || 0);
+            renderables.push(child);
+            if (order < minOrder) minOrder = order;
+            if (order > maxOrder) maxOrder = order;
+        });
+        if (!Number.isFinite(minOrder)) return;
+        const delta = Number(targetBaseOrder || 0) - minOrder;
+        for (let i = 0; i < renderables.length; i++) {
+            renderables[i].renderOrder = Number(renderables[i].renderOrder || 0) + delta;
+        }
+        module.nodeZCounter = Math.max(Number(module.nodeZCounter || 0), maxOrder + delta + 1);
+    }
+
+    function flushPendingGlRenderOrder(module, entry) {
+        if (!module || !entry || !Number.isFinite(entry._pendingGlRenderOrderBase)) {
+            return false;
+        }
+        applyNodeGlRenderOrder(module, entry, entry._pendingGlRenderOrderBase);
+        delete entry._pendingGlRenderOrderBase;
+        entry._pendingGlRenderOrderScheduled = false;
+        return true;
+    }
+
+    function schedulePendingGlRenderOrder(module, nodeId, entry, attempt = 0) {
+        if (!module || !entry || entry._pendingGlRenderOrderScheduled === true) return;
+        entry._pendingGlRenderOrderScheduled = true;
+        const run = () => {
+            entry._pendingGlRenderOrderScheduled = false;
+            if (module.nodeObjectsById?.get?.(nodeId) !== entry ||
+                !Number.isFinite(entry._pendingGlRenderOrderBase)) {
+                return;
+            }
+            const isInteracting =
+                module.isPanning === true ||
+                module.isZooming === true ||
+                module.isDraggingNode === true ||
+                module.isDraggingMultipleNodes === true ||
+                module.isSelecting === true;
+            if (isInteracting && attempt < 12) {
+                schedulePendingGlRenderOrder(module, nodeId, entry, attempt + 1);
+                return;
+            }
+            if (!isInteracting) {
+                flushPendingGlRenderOrder(module, entry);
+            }
+        };
+        if (typeof requestIdleCallback === 'function') {
+            requestIdleCallback(run, { timeout: 180 });
+        } else {
+            setTimeout(run, 32);
+        }
+    }
+
     function bringNodeToFront(module, nodeId) {
         if (!module || !nodeId) return;
 
@@ -3495,35 +3555,15 @@
         const contentTypeLower = getNodeContentTypeLower(entry.model);
         const usesSafeMediaSelectionChrome = contentTypeLower === 'video' || contentTypeLower === 'embed';
 
-        // Keep relative renderOrder offsets (e.g., resize handles above body) and move whole node to top.
-        if (entry.glObject) {
-            let minOrder = Infinity;
-            let maxOrder = -Infinity;
-
-            entry.glObject.traverse(child => {
-                if (child.isMesh || child.isLine) {
-                    const order = child.renderOrder || 0;
-                    if (order < minOrder) minOrder = order;
-                    if (order > maxOrder) maxOrder = order;
-                }
-            });
-
-            if (!Number.isFinite(minOrder)) minOrder = 0;
-            if (!Number.isFinite(maxOrder)) maxOrder = minOrder;
-
-            const targetBaseOrder = module.nodeZCounter++;
-            const delta = targetBaseOrder - minOrder;
-
-            entry.glObject.traverse(child => {
-                if (child.isMesh || child.isLine) {
-                    child.renderOrder = (child.renderOrder || 0) + delta;
-                }
-            });
-
-            const nextTop = maxOrder + delta + 1;
-            if (nextTop > module.nodeZCounter) {
-                module.nodeZCounter = nextTop;
-            }
+        const targetBaseOrder = module.nodeZCounter++;
+        const deferGlOrder = entry.currentType === 'CSS' &&
+            entry.cssObject?.visible === true &&
+            Number(module.camera?.position?.z || 0) < 9000;
+        if (deferGlOrder) {
+            entry._pendingGlRenderOrderBase = targetBaseOrder;
+            schedulePendingGlRenderOrder(module, nodeId, entry);
+        } else {
+            applyNodeGlRenderOrder(module, entry, targetBaseOrder);
         }
 
         // CSS3DObject re-parenting can trigger a one-frame detach flicker.
@@ -4226,30 +4266,10 @@
         }
         // ▲▲▲ [Optimization] ▲▲▲
 
-        // ▼▼▼ [Fix] 다른 노드들의 텍스트 선택을 비활성화하여 선택 번짐 방지 ▼▼▼
-        module.nodeObjectsById.forEach((otherEntry, otherId) => {
-            if (otherId === nodeId) return; // 현재 노드는 건너뛰기
-            if (!otherEntry.cssObject?.element) return;
-
-            const otherWrapper = otherEntry.cssObject.element;
-            // 다른 노드들의 텍스트 선택 비활성화
-            const contentEls = otherWrapper.querySelectorAll(NODE_TEXT_SELECTION_SELECTORS);
-            contentEls.forEach(el => {
-                el.style.userSelect = 'none';
-                el.style.webkitUserSelect = 'none';
-            });
-        });
-        // ▲▲▲ [Fix] ▲▲▲
-
-        // ▼▼▼ [Fix] 현재 노드의 텍스트 선택 활성화 ▼▼▼
-        const currentWrapper = nodeEntry.cssObject.element;
-        if (currentWrapper) {
-            const contentEls = currentWrapper.querySelectorAll(NODE_TEXT_SELECTION_SELECTORS);
-            contentEls.forEach(el => {
-                el.style.userSelect = 'text';
-                el.style.webkitUserSelect = 'text';
-            });
-        }
+        // CSS3D text selection ownership is updated as a previous/next delta.
+        // The manager patches only those two wrappers instead of walking the
+        // complete node map on every CSS3D promotion.
+        window.MindMapCss3DManager?.setNativeTextSelectionOwnerClass?.(module, nodeId);
         // ▲▲▲ [Fix] ▲▲▲
 
         // Sync CSS3D scroll position with WebGL/model scrollOffset (ratio-based).
@@ -4315,6 +4335,7 @@
         // ▲▲▲ [Changed] ▲▲▲
 
         if (nodeEntry.currentType === 'GL') {
+            flushPendingGlRenderOrder(module, nodeEntry);
             log(`[MindMapNodes] SwitchToWebGL(${nodeId}) SKIPPED (Already in GL mode).`);
             return;
         }
@@ -4324,6 +4345,7 @@
         if (nodeEntry.isDeferredShell === true) {
             await ensureDeferredNodeMaterialized(module, nodeEntry, { attachToScene: true });
         }
+        flushPendingGlRenderOrder(module, nodeEntry);
 
         // Store CSS3D textarea scroll ratio into WebGL scrollOffset
         const textarea = nodeEntry.cssObject.element.querySelector('textarea');

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

@@ -146,11 +146,14 @@
 
     // ▼▼▼ [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;
+    const renderQueueSet = new Set();
+    let renderQueueScheduled = false;
+    let renderModuleRef = null;
+    let renderQueueDirty = false;
+    const RENDER_BUDGET_MS = 8;
+    let renderSeq = 0;
+    let renderQueueSortCount = 0;
+    let renderQueueMaxLength = 0;
 
     function computeRenderPriority(module, nodeId) {
         const entry = module?.nodeObjectsById?.get(nodeId);
@@ -178,9 +181,11 @@
     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);
+        if (!renderQueueSet.has(nodeId)) {
+            renderQueue.push({ nodeId, priority: computeRenderPriority(module, nodeId), seq: renderSeq++ });
+            renderQueueSet.add(nodeId);
+            renderQueueDirty = true;
+            renderQueueMaxLength = Math.max(renderQueueMaxLength, renderQueue.length);
         }
         scheduleRenderQueue();
     }
@@ -195,12 +200,16 @@
         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();
+        if (renderQueueDirty) {
+            if (renderQueue.length > 1) {
+                renderQueue.sort((a, b) => (b.priority - a.priority) || (b.seq - a.seq));
+                renderQueueSortCount++;
+            }
+            renderQueueDirty = false;
+        }
+
+        while (renderQueue.length > 0) {
+            const item = renderQueue.pop();
             const nodeId = item.nodeId;
             renderQueueSet.delete(nodeId);
             if (renderModuleRef) {
@@ -224,7 +233,8 @@
     // ▲▲▲ [New] ▲▲▲
 
     // ▼▼▼ [Perf] Deferred disposal to avoid GC/driver spikes ▼▼▼
-    const disposeQueue = [];
+    const disposeQueue = [];
+    let disposeQueueHead = 0;
     let disposeScheduled = false;
     const DISPOSE_BUDGET_MS = 6; // soft budget per frame
 
@@ -246,8 +256,8 @@
 
     function processDisposeQueue(deadline) {
         const start = performance.now();
-        while (disposeQueue.length > 0) {
-            const item = disposeQueue.shift();
+        while (disposeQueueHead < disposeQueue.length) {
+            const item = disposeQueue[disposeQueueHead++];
             try { item.dispose(); } catch { }
 
             if (deadline && typeof deadline.timeRemaining === 'function') {
@@ -258,9 +268,16 @@
         }
 
         disposeScheduled = false;
-        if (disposeQueue.length > 0) {
-            scheduleDispose();
-        }
+        if (disposeQueueHead >= disposeQueue.length) {
+            disposeQueue.length = 0;
+            disposeQueueHead = 0;
+        } else if (disposeQueue.length - disposeQueueHead > 64) {
+            disposeQueue.splice(0, disposeQueueHead);
+            disposeQueueHead = 0;
+        }
+        if (disposeQueueHead < disposeQueue.length) {
+            scheduleDispose();
+        }
     }
     // ▲▲▲ [Perf] ▲▲▲
 
@@ -335,6 +352,7 @@
         if (!group) return null;
 
         let outline = group.getObjectByName('outline');
+        const geometryKey = `${Math.round(width)}x${Math.round(height)}:${IMAGE_SELECTION_GLOW_PAD}`;
         if (!outline) {
             outline = new THREE.Mesh(
                 createRoundedRectFilledGeometry(
@@ -351,16 +369,24 @@
                 })
             );
             outline.name = 'outline';
-            outline.userData = { ...(outline.userData || {}), isImageSelectionGlow: true };
+            outline.userData = {
+                ...(outline.userData || {}),
+                isImageSelectionGlow: true,
+                geometrySizeKey: geometryKey
+            };
             group.add(outline);
+        } else {
+            window.MindMapCss3dHotPath?.replaceGeometryIfSizeChanged?.(
+                outline,
+                geometryKey,
+                () => createRoundedRectFilledGeometry(
+                    width + IMAGE_SELECTION_GLOW_PAD,
+                    height + IMAGE_SELECTION_GLOW_PAD,
+                    20 + (IMAGE_SELECTION_GLOW_PAD * 0.5)
+                )
+            );
         }
 
-        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;
@@ -2186,7 +2212,7 @@
     }
 
     // Expose MindMapPipeline globally
-    window.MindMapPipeline = {
+    window.MindMapPipeline = {
         processRenderQueue: processRenderQueue,
         debouncedProcessRenderQueue: debouncedProcessRenderQueue,
         throttledScrollUpdate: throttledScrollUpdate,
@@ -2194,8 +2220,18 @@
         throttledProcessRenderQueueDuringResize: throttledProcessRenderQueueDuringResize,
         startResizing: startResizing,
         doResizing: doResizing,
-        stopResizing: stopResizing,
-        throttledUpdateScrollInCSharp: throttledUpdateScrollInCSharp
+        stopResizing: stopResizing,
+        getQueueDebugMetrics: () => ({
+            sortCount: renderQueueSortCount,
+            maxLength: renderQueueMaxLength,
+            currentLength: renderQueue.length,
+            disposePending: Math.max(0, disposeQueue.length - disposeQueueHead)
+        }),
+        resetQueueDebugMetrics: () => {
+            renderQueueSortCount = 0;
+            renderQueueMaxLength = renderQueue.length;
+        },
+        throttledUpdateScrollInCSharp: throttledUpdateScrollInCSharp
     };
 
     console.log('? mind-map-pipeline.js loaded');