@mindexec/cli 0.2.432 → 0.2.434

package/wwwroot/_content/MindExecution.Shared/js/mind-map-render-plan.js

@@ -1,19 +1,75 @@
 (function () {
     'use strict';
 
-    const BUILD_ID = '20260712-stable-fullres-plan-v12';
+    const BUILD_ID = '20260712-boundary-transition-cache-v38';
     const FRAME_SAMPLE_LIMIT = 240;
     const INITIAL_LINE_TEXTURE_ROWS = 1024;
     const GPU_WARM_RETRY_DELAY_MS = 120;
     const IMAGE_ATLAS_TILE_SIZE = 128;
     const frameSampleStates = new WeakMap();
     const residentLinePrewarmStates = new WeakMap();
+    const residentTransitionStates = new WeakMap();
+    const cssMediaFrameDomStates = new WeakMap();
+    let cssMediaFrameDomReuseCount = 0;
+    let cssMediaFrameDomApplyCount = 0;
+    const RESIDENT_CSS_CACHE_TEXT_TYPES = new Set(['text', 'note', 'memo', 'markdown', 'code', 'csv-table']);
     const VIEW_SYNC_SECTION_KEYS = [
         'fullResSetup', 'fullResImages', 'fullResCssQueue', 'fullResHandoff', 'fullResOther',
-        'lodCleanup', 'lodNodeScan', 'lodResidentApply', 'lodImageInstances',
+        'lodCleanup', 'lodNodeScan', 'lodResidentApply', 'lodLinePatch', 'lodImageInstances',
         'lodPositionPatch', 'lodFallbacks', 'lodOther'
     ];
 
+    function configureImageAtlasTexture(texture, THREE) {
+        if (!texture || !THREE) return texture;
+        if ('colorSpace' in texture && THREE.SRGBColorSpace) texture.colorSpace = THREE.SRGBColorSpace;
+        else if ('encoding' in texture && THREE.sRGBEncoding) texture.encoding = THREE.sRGBEncoding;
+        texture.minFilter = THREE.LinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture.wrapS = THREE.ClampToEdgeWrapping;
+        texture.wrapT = THREE.ClampToEdgeWrapping;
+        texture.flipY = false;
+        texture.generateMipmaps = false;
+        texture.needsUpdate = true;
+        return texture;
+    }
+
+    function getImageAtlasOutputColorChunk(THREE) {
+        const chunk = THREE?.ShaderChunk?.colorspace_fragment
+            ? '#include <colorspace_fragment>'
+            : (THREE?.ShaderChunk?.encodings_fragment ? '#include <encodings_fragment>' : '');
+        globalThis.MindCanvasDevGuards?.assert?.(chunk.length > 0,
+            'resident-image-output-color-chunk-missing', { threeRevision: String(THREE?.REVISION || 'unknown') });
+        return chunk;
+    }
+
+    function syncCommittedResidentTextCount(renderer, hasResidentInstances, forceResident) {
+        if (forceResident !== true || !hasResidentInstances || renderer?._lodUsesVisibleSubset === true ||
+            renderer?._instancesDirty === true || renderer?._isNodeArrayDirty === true) return -1;
+        const count = Number(renderer?.instanceData?.nodeIds?.length || 0);
+        renderer._cachedEligibleTextLikeCount = count;
+        renderer._lastNodeCount = count;
+        return count;
+    }
+
+    function clearFullResImageVisuals(renderer, nodeObjectsById) {
+        const tracked = renderer?._fullResImageVisualIds;
+        if (!tracked) return;
+        for (const nodeId of tracked) {
+            const entry = nodeObjectsById?.get?.(nodeId) || null;
+            if (entry) renderer._hideImageLodFullVisual?.(entry);
+        }
+        if (renderer.isInLODMode === true) {
+            const residentIds = renderer.imageInstanceData?.nodeIds || [];
+            for (let i = 0; i < residentIds.length; i++) {
+                const nodeId = residentIds[i];
+                if (!nodeId || tracked.has(nodeId)) continue;
+                const entry = nodeObjectsById?.get?.(nodeId) || null;
+                if (entry) renderer._hideImageLodFullVisual?.(entry);
+            }
+        }
+        tracked.clear();
+    }
+
     function isFullResMotionOptimizationActive(module) {
         return (module?._viewSyncMotionActive === true ||
                 module?.isPanning === true ||
@@ -191,8 +247,32 @@
             context.fillStyle = '#eef2f7';
             context.fillRect(0, 0, size, size);
         }
-        if (renderer.imageAtlasTexture) renderer.imageAtlasTexture.needsUpdate = true;
+        const THREE = globalThis.THREE;
+        const previousTexture = renderer.imageAtlasTexture || null;
+        if (THREE?.CanvasTexture) {
+            const nextTexture = new THREE.CanvasTexture(renderer.imageAtlasCanvas);
+            nextTexture.minFilter = previousTexture?.minFilter ?? THREE.LinearFilter;
+            nextTexture.magFilter = previousTexture?.magFilter ?? THREE.LinearFilter;
+            nextTexture.wrapS = previousTexture?.wrapS ?? THREE.ClampToEdgeWrapping;
+            nextTexture.wrapT = previousTexture?.wrapT ?? THREE.ClampToEdgeWrapping;
+            nextTexture.flipY = previousTexture?.flipY ?? false;
+            nextTexture.generateMipmaps = previousTexture?.generateMipmaps ?? false;
+            if ('colorSpace' in nextTexture && previousTexture?.colorSpace) {
+                nextTexture.colorSpace = previousTexture.colorSpace;
+            } else if ('encoding' in nextTexture && previousTexture?.encoding != null) {
+                nextTexture.encoding = previousTexture.encoding;
+            }
+            nextTexture.needsUpdate = true;
+            renderer.imageAtlasTexture = nextTexture;
+            const atlasUniform = renderer.instancedImageMesh?.material?.uniforms?.uImageAtlas || null;
+            if (atlasUniform) atlasUniform.value = nextTexture;
+            previousTexture?.dispose?.();
+        } else if (previousTexture) {
+            previousTexture.needsUpdate = true;
+        }
         renderer._residentGpuWarmKey = '';
+        renderer._residentGpuWarmOffscreenComplete = false;
+        renderer._residentImageAtlasWarmVersion = -1;
         return true;
     }
 
@@ -207,6 +287,531 @@
         return batch;
     }
 
+    function reuseCssMediaFrameDom(cssObject, width, height, hasContextSourcePins = false) {
+        const wrapper = cssObject?.element || null;
+        const isMedia = wrapper?.classList?.contains?.('node-type-image') === true ||
+            wrapper?.classList?.contains?.('node-type-video') === true ||
+            wrapper?.classList?.contains?.('node-type-embed') === true;
+        if (!isMedia || !wrapper?.style) return false;
+
+        const inner = wrapper.firstElementChild || null;
+        const content = inner?.querySelector?.('.node-content-wrapper') || null;
+        const response = inner?.querySelector?.('.node-response') || null;
+        const surface = inner?.querySelector?.('img,video,canvas.mind-map-video-proxy,iframe,.embed-card,.embed-iframe-shell') || null;
+        const resolutionScale = Math.max(1, Number(cssObject?.userData?.resolutionScale || 1));
+        const worldWidth = Math.max(1, Math.round(Number(width || 1)));
+        const worldHeight = Math.max(1, Math.round(Number(height || 1)));
+        const scaledWidth = worldWidth * resolutionScale;
+        const scaledHeight = worldHeight * resolutionScale;
+        const state = cssMediaFrameDomStates.get(cssObject) || null;
+        const structureMatches = !!state && state.wrapper === wrapper && state.inner === inner &&
+            state.content === content && state.response === response && state.surface === surface &&
+            state.innerChildren === Number(inner?.childElementCount ?? inner?.children?.length ?? 0) &&
+            state.contentChildren === Number(content?.childElementCount ?? content?.children?.length ?? 0);
+        const frameMatches = structureMatches && state.width === worldWidth && state.height === worldHeight &&
+            state.resolutionScale === resolutionScale && state.hasContextSourcePins === (hasContextSourcePins === true);
+        const frameStylesReady = wrapper.style.width === `${scaledWidth}px` && wrapper.style.height === `${scaledHeight}px` &&
+            (!inner?.style || (inner.style.width === `${worldWidth}px` && inner.style.height === `${worldHeight}px`));
+
+        if (frameMatches && frameStylesReady) {
+            cssMediaFrameDomReuseCount++;
+            return true;
+        }
+
+        cssMediaFrameDomStates.set(cssObject, {
+            wrapper,
+            inner,
+            content,
+            response,
+            surface,
+            innerChildren: Number(inner?.childElementCount ?? inner?.children?.length ?? 0),
+            contentChildren: Number(content?.childElementCount ?? content?.children?.length ?? 0),
+            width: worldWidth,
+            height: worldHeight,
+            resolutionScale,
+            hasContextSourcePins: hasContextSourcePins === true
+        });
+        cssMediaFrameDomApplyCount++;
+        return false;
+    }
+
+    function reuseStableVisibleCss(renderer, entry, module, nodeIdValue, options = {}) {
+        const cssObject = entry?.cssObject || null;
+        const element = cssObject?.element || null;
+        const nodeId = String(nodeIdValue || entry?.model?.id || entry?.model?.Id || entry?.glObject?.userData?.nodeId || '').trim();
+        const cssScene = module?.cssScene || module?.scene || null;
+        const allowResident = options.allowResident === true;
+        if (!nodeId || !element || entry?.isCssDirty === true || entry?.currentType !== 'CSS' ||
+            cssObject.visible !== true || cssObject.userData?._residentTransitionPrepared === true ||
+            (!allowResident && renderer?.isInLODMode === true) || (cssScene && cssObject.parent !== cssScene) ||
+            element.style?.display === 'none' || element.style?.visibility === 'hidden' || element.style?.opacity === '0' ||
+            module?._cssParentRepairNeeded === true || module?._cssTransformDirtyIds?.has?.(nodeId) === true) return false;
+
+        const selectedNodeId = String(module?.selectedNodeIdJs || module?.selectedNodeId || '').trim();
+        const editingNodeId = String(module?._textOverlayV2State?.editing?.nodeId || module?._editingOverlayState?.nodeId || '').trim();
+        if (selectedNodeId === nodeId || module?.multiSelectedNodeIds?.has?.(nodeId) === true ||
+            module?.draggedNodeId === nodeId || editingNodeId === nodeId ||
+            renderer?._getCurrentHoveredNodeId?.(module) === nodeId) return false;
+
+        const inner = element.querySelector?.('.node-container') || null;
+        const targets = inner && inner !== element ? [element, inner] : [element];
+        const isHigh = options.isHighDetail === true;
+        for (const target of targets) {
+            if (!target?.classList || target.classList.contains(isHigh ? 'lod-high' : 'lod-low') !== true ||
+                target.classList.contains(isHigh ? 'lod-low' : 'lod-high') === true) return false;
+        }
+        if (isHigh && (element.matches?.('[data-text-overlay-source-suspended],.mind-map-text-overlay-source-suspended,.mind-map-v2-source-suspended') === true ||
+            element.querySelector?.('[data-text-overlay-source-suspended],.mind-map-text-overlay-source-suspended,.mind-map-v2-source-suspended'))) return false;
+
+        const contentType = String(entry?.model?.contentType ?? entry?.model?.ContentType ?? '').trim().toLowerCase();
+        if (contentType === 'image' || contentType === 'video') {
+            const media = element.querySelector?.('img,video') || null;
+            const source = media?.getAttribute?.('src') || media?.currentSrc || media?.src || '';
+            if (!media || !source) return false;
+        } else if (contentType === 'embed' &&
+            !element.querySelector?.('.embed-card,.embed-frame,.embed-iframe-shell')) return false;
+
+        renderer?._nearCssVisibleIds?.add?.(nodeId);
+        if (renderer) renderer._fullResCssStableReuseCount = Number(renderer._fullResCssStableReuseCount || 0) + 1;
+        return true;
+    }
+
+    function reuseActiveCssMediaFallback(renderer, entry, module) {
+        const cssObject = entry?.cssObject || null;
+        const element = cssObject?.element || null;
+        const nodeId = String(entry?.model?.id || entry?.model?.Id || entry?.glObject?.userData?.nodeId || '').trim();
+        const cssScene = module?.cssScene || module?.scene || null;
+        if (!nodeId || !element || entry?.isCssDirty === true || cssObject.visible !== true ||
+            !renderer?._lodImageCssFallbackNodeIds?.has?.(nodeId) ||
+            (cssScene && cssObject.parent !== cssScene) || element.style?.display === 'none' ||
+            element.style?.visibility === 'hidden' || element.style?.opacity === '0') return false;
+        if (String(module?.selectedNodeIdJs || module?.selectedNodeId || '') === nodeId ||
+            module?.multiSelectedNodeIds?.has?.(nodeId) === true || module?.draggedNodeId === nodeId ||
+            renderer?._getCurrentHoveredNodeId?.(module) === nodeId) return false;
+        return true;
+    }
+
+    function hasAnimatedGifCssFallbackCandidates(renderer, module, isAnimatedGifModel) {
+        const nodeObjectsById = module?.nodeObjectsById || renderer?._module?.nodeObjectsById || null;
+        if (!nodeObjectsById || typeof isAnimatedGifModel !== 'function') return false;
+        const isGifId = (value) => {
+            const nodeId = String(value || '').trim();
+            return !!nodeId && isAnimatedGifModel(nodeObjectsById.get(nodeId)?.model) === true;
+        };
+        const scan = (ids) => {
+            if (!ids) return false;
+            for (const nodeId of ids) if (isGifId(nodeId)) return true;
+            return false;
+        };
+        const visibleIds = module?._visibleIds || null;
+        if (scan(visibleIds)) return true;
+        if (module?._prevVisibleIds !== visibleIds && scan(module?._prevVisibleIds)) return true;
+        if (isGifId(module?.selectedNodeIdJs) || scan(module?.multiSelectedNodeIds)) return true;
+        return scan(renderer?._lodImageCssFallbackNodeIds);
+    }
+
+    function hasResidentDirtyWork(renderer, camera, module, resolveLodBand, buildSelectionKey, isAnimatedGifModel) {
+        if (!renderer) return false;
+        const lodBand = camera && typeof resolveLodBand === 'function'
+            ? resolveLodBand(Number(camera.position?.z || 0))
+            : renderer._currentLodBand;
+        if (renderer._instancesDirty === true || renderer._imageInstancesDirty === true ||
+            renderer._positionsOnlyDirty === true || renderer._isNodeArrayDirty === true ||
+            Number(renderer._dirtyPositionIds?.size || 0) > 0 || Number(renderer._pendingSelectionRefreshIds?.size || 0) > 0 ||
+            renderer._imageAtlasRebuildPending === true || Number(renderer._imageAtlasQueuedIds?.size || 0) > 0 ||
+            Number(renderer._imageAtlasLoadingIds?.size || 0) > 0 || Number(renderer._imageAtlasBatchReadyIds?.size || 0) > 0 ||
+            renderer._imageAtlasBatchActive === true || renderer._lodCleanupPending === true ||
+            renderer._deferLineRestorePending === true || renderer._hasPendingLineDetailRestore?.(lodBand) === true ||
+            Number(renderer._pendingLodVisibilityVersion ?? -1) >= 0 || renderer._fullResHandoffActive === true ||
+            renderer.isLoading === true || module?.isLoading === true || renderer._hasResidentLodInstances?.() !== true) return true;
+        const selectionKey = typeof buildSelectionKey === 'function'
+            ? buildSelectionKey(module?.multiSelectedNodeIds || null, module?.selectedNodeIdJs || null)
+            : '';
+        if (renderer._lastAppliedLodSelectionKey !== selectionKey) return true;
+        const usesCssImageFallbacks = renderer._shouldUseCssImageFallbackInResidentLod?.(module, lodBand) === true;
+        const usesAnimatedGifFallbacks = hasAnimatedGifCssFallbackCandidates(renderer, module, isAnimatedGifModel);
+        const fallbackCount = Number(renderer._lodImageCssFallbackNodeIds?.size || 0);
+        if (!usesAnimatedGifFallbacks && fallbackCount <= 0) return false;
+        const activeFallbackCount = Number(renderer._getActiveCssMediaLodFallbackCount?.(module) || 0);
+        return (usesAnimatedGifFallbacks && activeFallbackCount <= 0) ||
+            (fallbackCount > 0 && (!(usesCssImageFallbacks || usesAnimatedGifFallbacks) || activeFallbackCount <= 0));
+    }
+
+    function hasPendingNearCssWarmup(renderer, module, buildSelectionKey, isCss3dEnabled, supportsCss3dModel) {
+        if (!renderer || renderer.isInLODMode !== false) return false;
+        if (renderer._css3dProcessing === true || Number(renderer._css3dQueuedMap?.size || 0) > 0 ||
+            renderer._hasCss3dQueueItems?.() === true || Number(renderer._nearEntryBoostFrames || 0) > 0) return true;
+        const moduleRef = module || renderer._module || null;
+        const visibleIds = renderer._getNearVisibleIds?.(moduleRef) || null;
+        const nodeObjectsById = moduleRef?.nodeObjectsById || null;
+        if (!visibleIds || !nodeObjectsById || visibleIds.size === 0) return false;
+        const selectionKey = buildSelectionKey?.(moduleRef?.multiSelectedNodeIds || null, moduleRef?.selectedNodeIdJs || null) || '';
+        const stableKey = buildFullResKey(renderer._currentLodBand, moduleRef?._visibilityVersion || 0, selectionKey,
+            nodeObjectsById.size, visibleIds.size, renderer._nearCssVisibleIds?.size || 0,
+            renderer._activeFullResCssNodeIds?.size || 0, isCss3dEnabled?.(moduleRef) !== false, moduleRef, renderer);
+        if (stableKey && renderer._lastNearCssNoWorkKey === stableKey) return false;
+        for (const nodeId of visibleIds) {
+            if (renderer._nearCssVisibleIds?.has?.(nodeId)) continue;
+            const entry = nodeObjectsById.get(nodeId);
+            if (entry?.glObject && supportsCss3dModel?.(entry.model) === true) return true;
+        }
+        return false;
+    }
+
+    function resetPreparedLayoutRecord(record) {
+        if (!record?.layoutPrepared) return;
+        const cssObject = record.cssObject;
+        const element = record.element;
+        if (cssObject?.userData) cssObject.userData._residentTransitionPrepared = false;
+        record.layoutPrepared = false;
+        if (cssObject?.visible !== true && element?.style) {
+            element.style.setProperty?.('display', 'none', 'important');
+            element.style.setProperty?.('visibility', 'visible', 'important');
+            element.style.setProperty?.('opacity', '1', 'important');
+            element.style.setProperty?.('pointer-events', record.pointerEvents || 'auto', 'important');
+        }
+    }
+
+    function clearTransitionRecords(state) {
+        if (!state) return;
+        state.layoutEpoch = Number(state.layoutEpoch || 0) + 1;
+        if (state.layoutRetryTimer) clearTimeout(state.layoutRetryTimer);
+        for (const record of state.parked?.values?.() || []) resetPreparedLayoutRecord(record);
+        state.parked?.clear?.();
+        state.layoutQueue = null;
+        state.layoutCursor = 0;
+        state.layoutScheduled = false;
+        state.layoutFrameScheduled = false;
+        state.layoutRetryTimer = null;
+    }
+
+    function getTransitionState(renderer, module, nodeObjectsById) {
+        let state = residentTransitionStates.get(renderer);
+        if (!state || state.module !== module || state.nodeObjectsById !== nodeObjectsById) {
+            clearTransitionRecords(state);
+            state = {
+                renderer, module, nodeObjectsById, active: false, selectionKey: '', parked: new Map(),
+                layoutQueue: null, layoutCursor: 0, layoutScheduled: false, layoutFrameScheduled: false,
+                layoutRetryTimer: null, layoutEpoch: 0
+            };
+            residentTransitionStates.set(renderer, state);
+        }
+        return state;
+    }
+
+    function getResidentCssCacheKind(entry) {
+        const model = entry?.model || null;
+        const contentType = String(model?.contentType ?? model?.ContentType ?? '').trim().toLowerCase();
+        if (contentType === 'image') return 'image';
+        if (contentType === 'video' || contentType === 'embed' || contentType === 'templatelauncher') return contentType;
+        if (RESIDENT_CSS_CACHE_TEXT_TYPES.has(contentType)) return 'text';
+        const metadata = model?.metadata || model?.Metadata || null;
+        const nodeType = String(model?.nodeType ?? model?.NodeType ?? '').toLowerCase();
+        const semanticType = String(metadata?.SemanticType ?? metadata?.semanticType ?? '');
+        const agentId = metadata?.agentId ?? metadata?.AgentId;
+        return nodeType.startsWith('agent_') || semanticType === 'MindCanvasAgent' || semanticType === 'AgentCommand' ||
+            semanticType === 'BusinessAutomationNode' || (agentId != null && String(agentId).trim() !== '') ? 'text' : null;
+    }
+
+    function cacheResidentCssEntry(state, entry, nodeId, kind) {
+        const cssObject = entry?.cssObject || null;
+        if (!state?.active || !kind || entry?.isCssDirty === true || !cssObject?.element) return false;
+        const cssScene = state.module?.cssScene || state.module?.scene || null;
+        if (!cssScene || (cssObject.parent != null && cssObject.parent !== cssScene)) return false;
+        const id = String(nodeId || '');
+        const previous = state.parked.get(id) || null;
+        if (previous?.layoutPrepared === true &&
+            (previous.cssObject !== cssObject || previous.element !== cssObject.element)) resetPreparedLayoutRecord(previous);
+        state.parked.set(id, {
+            nodeId: id,
+            entry, cssObject, element: cssObject.element, parent: cssObject.parent, kind,
+            pointerEvents: previous?.pointerEvents ?? cssObject.element.style?.pointerEvents ?? '',
+            layoutEligible: previous?.layoutEligible === true,
+            layoutPrepared: previous?.layoutPrepared === true && previous.cssObject === cssObject && previous.element === cssObject.element,
+            selectionKey: state.selectionKey,
+            ...getEntryContentState(entry)
+        });
+        state.layoutQueue = null;
+        return true;
+    }
+
+    function cachePreparedResidentCss(renderer, entry, module, nodeObjectsById) {
+        const state = residentTransitionStates.get(renderer);
+        if (!state || state.module !== module || state.nodeObjectsById !== nodeObjectsById) return false;
+        const nodeId = entry?.model?.id || entry?.model?.Id || entry?.glObject?.userData?.nodeId || '';
+        const cached = cacheResidentCssEntry(state, entry, nodeId, getResidentCssCacheKind(entry));
+        if (cached) {
+            const record = state.parked.get(String(nodeId || ''));
+            if (record) record.layoutEligible = true;
+            scheduleResidentCssLayoutWarm(renderer, module, nodeObjectsById);
+        }
+        return cached;
+    }
+
+    function beginResidentCssTransition(renderer, module, nodeObjectsById, previousBand, nextBand, selectionKey) {
+        if (!renderer || !module || !nodeObjectsById) return false;
+        const state = getTransitionState(renderer, module, nodeObjectsById);
+        const enteringResident = previousBand === 'NORMAL' && nextBand === 'MID';
+        const returningFullRes = (previousBand === 'MID' || previousBand === 'FAR') && nextBand === 'NORMAL';
+        if (enteringResident) {
+            clearTransitionRecords(state);
+            state.active = true;
+            state.selectionKey = String(selectionKey || '');
+            for (const [nodeId, entry] of nodeObjectsById) {
+                cacheResidentCssEntry(state, entry, nodeId, getResidentCssCacheKind(entry));
+            }
+        } else if (!returningFullRes) {
+            clearTransitionRecords(state);
+            state.active = false;
+            state.selectionKey = '';
+        }
+        return enteringResident || (returningFullRes && state.active);
+    }
+
+    function getEntryContentState(entry) {
+        const model = entry?.model || null;
+        return {
+            model,
+            source: model?._visibleContent ?? model?.response ?? model?.Response ?? model?.content ?? model?.Content ?? '',
+            prompt: model?.prompt ?? model?.Prompt ?? '',
+            width: Number(model?.width || model?.Width || 0),
+            height: Number(model?.height || model?.Height || 0),
+            media: model?.thumbnailUrl ?? model?.ThumbnailUrl ?? model?.displayUrl ?? model?.DisplayUrl ?? ''
+        };
+    }
+
+    function parkFullResCss(renderer, entry, module, nodeObjectsById, selectionKey, kind = 'text') {
+        const cssObject = entry?.cssObject || null;
+        const element = cssObject?.element || null;
+        const nodeId = String(entry?.model?.id || entry?.model?.Id || entry?.glObject?.userData?.nodeId || '').trim();
+        if (!renderer || !cssObject || !element || !nodeId) return false;
+        const state = getTransitionState(renderer, module, nodeObjectsById);
+        let cached = false;
+        if (state.active && state.selectionKey === String(selectionKey || '') && entry.isCssDirty !== true) {
+            cached = cacheResidentCssEntry(state, entry, nodeId, kind);
+            if (cached) {
+                const record = state.parked.get(nodeId);
+                if (record) record.layoutEligible = true;
+                renderer._residentCssParkCount = Number(renderer._residentCssParkCount || 0) + 1;
+            }
+        }
+        cssObject.visible = false;
+        entry.currentType = 'GL';
+        if (element.style?.display !== 'none') {
+            element.style?.setProperty?.('display', 'none', 'important');
+        }
+        if (cached && !state.layoutRetryTimer) {
+            const epoch = state.layoutEpoch;
+            state.layoutRetryTimer = setTimeout(() => {
+                state.layoutRetryTimer = null;
+                if (residentTransitionStates.get(renderer) === state && state.layoutEpoch === epoch) {
+                    scheduleResidentCssLayoutWarm(renderer, module, nodeObjectsById);
+                }
+            }, 0);
+        }
+        return true;
+    }
+
+    function scheduleResidentCssLayoutWarm(renderer, module, nodeObjectsById) {
+        const state = residentTransitionStates.get(renderer);
+        if (!state?.active || state.module !== module || state.nodeObjectsById !== nodeObjectsById ||
+            renderer?._disposed === true || renderer?.isInLODMode !== true || module?.isLoading === true) return false;
+        const visibleIds = module?._visibleIds || module?._prevVisibleIds || renderer?._visibleIds || null;
+        if (visibleIds?.size > 0) {
+            for (const nodeId of visibleIds) {
+                const record = state.parked.get(String(nodeId || ''));
+                if (record) record.layoutEligible = true;
+            }
+        }
+        if (isPrewarmInteractionActive(module)) {
+            if (!state.layoutRetryTimer) {
+                const epoch = state.layoutEpoch;
+                state.layoutRetryTimer = setTimeout(() => {
+                    state.layoutRetryTimer = null;
+                    if (residentTransitionStates.get(renderer) === state && state.layoutEpoch === epoch) {
+                        scheduleResidentCssLayoutWarm(renderer, module, nodeObjectsById);
+                    }
+                }, 80);
+            }
+            return false;
+        }
+        if (state.layoutScheduled || state.layoutFrameScheduled) return false;
+        if (!state.layoutQueue) {
+            state.layoutQueue = [];
+            state.layoutCursor = 0;
+            for (const record of state.parked.values()) {
+                if (record.layoutEligible === true && record.layoutPrepared !== true) state.layoutQueue.push(record);
+            }
+        }
+        if (state.layoutCursor >= state.layoutQueue.length) {
+            state.layoutQueue = null;
+            return false;
+        }
+
+        const epoch = state.layoutEpoch;
+        state.layoutScheduled = true;
+        const run = () => {
+            state.layoutScheduled = false;
+            if (residentTransitionStates.get(renderer) !== state || state.layoutEpoch !== epoch || !state.active ||
+                renderer?._disposed === true || renderer?.isInLODMode !== true || renderer?._module !== module ||
+                module?.nodeObjectsById !== nodeObjectsById || module?.isLoading === true) return;
+            if (isPrewarmInteractionActive(module)) {
+                state.layoutQueue = null;
+                scheduleResidentCssLayoutWarm(renderer, module, nodeObjectsById);
+                return;
+            }
+
+            // Visibility can expand while the wheel is still settling after
+            // NORMAL -> MID. Refresh from the latest set during idle so those
+            // CSS owners are not created synchronously on MID -> NORMAL.
+            const latestVisibleIds = module?._visibleIds || module?._prevVisibleIds || renderer?._visibleIds || null;
+            const latestPriority = latestVisibleIds?.size > 0
+                ? renderer?._getNearVisiblePriority?.(latestVisibleIds, nodeObjectsById, module?.camera)
+                : null;
+            if (Array.isArray(latestPriority) && latestPriority.length > 0) {
+                renderer?._queueCss3dPrewarm?.(latestPriority, nodeObjectsById, module, 'MID');
+            }
+            if (residentTransitionStates.get(renderer) !== state || state.layoutEpoch !== epoch ||
+                !Array.isArray(state.layoutQueue)) return;
+            const layoutQueue = state.layoutQueue;
+
+            const startedAt = performance.now();
+            let prepared = 0;
+            while (state.layoutCursor < layoutQueue.length && prepared < 4 &&
+                (prepared === 0 || performance.now() - startedAt < 2)) {
+                const record = layoutQueue[state.layoutCursor++];
+                if (state.parked.get(record.nodeId) !== record || record.entry?.isCssDirty === true ||
+                    record.cssObject?.visible === true || !record.element?.style) continue;
+                record.cssObject.userData = record.cssObject.userData || {};
+                record.cssObject.userData._residentTransitionPrepared = true;
+                record.element.style.setProperty?.('visibility', 'visible', 'important');
+                record.element.style.setProperty?.('opacity', '0', 'important');
+                record.element.style.setProperty?.('pointer-events', 'none', 'important');
+                record.element.style.setProperty?.('display', 'block', 'important');
+                record.layoutPrepared = true;
+                prepared++;
+            }
+            if (prepared > 0) {
+                renderer._residentCssLayoutWarmCount = Number(renderer._residentCssLayoutWarmCount || 0) + prepared;
+                module._css3dVisualChangedThisFrame = true;
+                module._css3dVisualChangedSinceLastRender = true;
+            }
+            if (state.layoutQueue !== layoutQueue) return;
+            if (state.layoutCursor < layoutQueue.length) {
+                state.layoutFrameScheduled = true;
+                const continueWarm = () => {
+                    state.layoutFrameScheduled = false;
+                    if (residentTransitionStates.get(renderer) === state && state.layoutEpoch === epoch) {
+                        scheduleResidentCssLayoutWarm(renderer, module, nodeObjectsById);
+                    }
+                };
+                if (typeof globalThis.requestAnimationFrame === 'function') globalThis.requestAnimationFrame(continueWarm);
+                else setTimeout(continueWarm, 16);
+            } else {
+                state.layoutQueue = null;
+            }
+        };
+        if (typeof globalThis.requestIdleCallback === 'function') globalThis.requestIdleCallback(run, { timeout: 120 });
+        else setTimeout(run, 16);
+        return true;
+    }
+
+    function parkReadyResidentImage(renderer, entry, module, nodeObjectsById, selectionKey, nodeId, animatedGif, selected, interactiveOwner) {
+        if (animatedGif === true || selected === true || interactiveOwner === true ||
+            renderer?._hasActiveImageLodInstance?.(nodeId) !== true) return false;
+        parkFullResCss(renderer, entry, module, nodeObjectsById, selectionKey, 'image');
+        renderer._hideImageLodFullVisual?.(entry);
+        renderer._setGlowVisibility?.(entry, false);
+        return true;
+    }
+
+    function restoreParkedFullResCss(renderer, entry, module, nodeObjectsById, selectionKey, lodBand, nodeIdValue) {
+        if (!renderer || lodBand !== 'NORMAL') return false;
+        const state = residentTransitionStates.get(renderer);
+        const nodeId = String(nodeIdValue || entry?.model?.id || entry?.model?.Id || '').trim();
+        const record = state?.parked?.get?.(nodeId) || null;
+        const current = getEntryContentState(entry);
+        const cssScene = module?.cssScene || module?.scene || null;
+        const valid = !!record && state.module === module && state.nodeObjectsById === nodeObjectsById &&
+            record.entry === entry && record.model === current.model && record.cssObject === entry?.cssObject &&
+            record.element === entry?.cssObject?.element && cssScene &&
+            (record.parent == null || record.parent === cssScene) &&
+            (entry.cssObject.parent == null || entry.cssObject.parent === cssScene) && entry.isCssDirty !== true &&
+            record.selectionKey === String(selectionKey || '') && record.source === current.source &&
+            record.prompt === current.prompt && record.width === current.width && record.height === current.height &&
+            record.media === current.media;
+        if (!valid) {
+            if (record) {
+                resetPreparedLayoutRecord(record);
+                state.parked.delete(nodeId);
+            }
+            if (state?.active) renderer._residentCssRestoreMissCount = Number(renderer._residentCssRestoreMissCount || 0) + 1;
+            return false;
+        }
+
+        const cssObject = record.cssObject;
+        const element = record.element;
+        const layoutPrepared = record.layoutPrepared === true && cssObject.userData?._residentTransitionPrepared === true;
+        if (cssObject.userData) cssObject.userData._residentTransitionPrepared = false;
+        if (cssObject.parent !== cssScene) cssScene.add?.(cssObject);
+        if (entry.glObject) {
+            entry.glObject.updateWorldMatrix?.(true, false);
+            entry.glObject.matrixWorld?.decompose?.(renderer._tmpWorldPos, renderer._tmpWorldQuat, renderer._tmpWorldScale);
+            if (renderer._tmpWorldPos) cssObject.position?.copy?.(renderer._tmpWorldPos);
+            if (renderer._tmpWorldQuat) cssObject.quaternion?.copy?.(renderer._tmpWorldQuat);
+            entry.glObject.visible = true;
+            if (entry.bodyMesh) entry.bodyMesh.visible = false;
+            if (entry.tailMesh) entry.tailMesh.visible = false;
+        }
+        cssObject.visible = true;
+        if (!layoutPrepared && element.style?.display !== 'block') element.style?.setProperty?.('display', 'block', 'important');
+        if (element.style?.visibility !== 'visible') element.style?.setProperty?.('visibility', 'visible', 'important');
+        if (element.style?.opacity !== '1') element.style?.setProperty?.('opacity', '1', 'important');
+        if (layoutPrepared) element.style?.setProperty?.('pointer-events', record.pointerEvents || 'auto', 'important');
+        if (element.style?.transition !== 'none') element.style?.setProperty?.('transition', 'none', 'important');
+        const rootStyle = element.firstElementChild?.style || null;
+        if (rootStyle && rootStyle.getPropertyValue?.('content-visibility') !== 'visible') {
+            rootStyle.setProperty?.('content-visibility', 'visible', 'important');
+            rootStyle.setProperty?.('contain-intrinsic-size', 'auto', 'important');
+        }
+        cssObject.updateMatrixWorld?.(true);
+        entry.currentType = 'CSS';
+        renderer._setCss3dLodClass?.(entry, renderer._shouldUseHighCss3dDetail?.(entry, module) !== false);
+        renderer._nearCssVisibleIds?.add?.(nodeId);
+        if (record.kind === 'image') renderer._syncCssImageBodyBridge?.(entry, module);
+        if (record.kind === 'video') globalThis.MindMapCss3DManager?.syncVideoNodeVisibilityPlayback?.(entry.model, cssObject, true);
+        renderer._lodImageCssFallbackNodeIds?.delete?.(nodeId);
+        state.parked.delete(nodeId);
+        renderer._residentCssRestoreCount = Number(renderer._residentCssRestoreCount || 0) + 1;
+        module._css3dVisualChangedThisFrame = true;
+        module._css3dVisualChangedSinceLastRender = true;
+        return true;
+    }
+
+    function completeFullResTransition(renderer, allowedCssCount) {
+        if (!renderer || Number(renderer._nearCssVisibleIds?.size || 0) < Number(allowedCssCount || 0) ||
+            renderer._hasCss3dQueueItems?.() === true || Number(renderer._css3dQueuedMap?.size || 0) > 0) return false;
+        if (renderer._nearEntryBoostFrames > 0) renderer._residentBoostClearCount = Number(renderer._residentBoostClearCount || 0) + 1;
+        renderer._nearEntryBoostFrames = 0;
+        const state = residentTransitionStates.get(renderer);
+        if (state) {
+            clearTransitionRecords(state);
+            state.active = false;
+        }
+        return true;
+    }
+
+    function ensureResidentLineDetails(renderer, lodBand) {
+        if (!renderer || lodBand !== 'MID') return false;
+        if (renderer.lineDataDirty === true || renderer._lineDetailsPatchPending === true) {
+            renderer._markLineDetailsDirty?.();
+            return false;
+        }
+        renderer._residentStableLineReuseCount = Number(renderer._residentStableLineReuseCount || 0) + 1;
+        if (renderer.instancedLineMesh) renderer.instancedLineMesh.visible = renderer._shouldShowInstancedLineMesh?.(lodBand) === true;
+        return true;
+    }
+
     function reusePreparedImageInstances(renderer, state) {
         if (renderer?.isInLODMode !== false || renderer?._imageInstancesDirtyReason !== 'image-slot-invalidated' ||
             state?.imageCandidateIds?.size !== state?.imagePreparedIds?.size) return false;
@@ -221,17 +826,169 @@
         return true;
     }
 
+    function prepareIdleResidentImageInstances(state) {
+        const renderer = state?.renderer;
+        const module = state?.module;
+        const nodeObjectsById = state?.nodeObjectsById;
+        if (!renderer || !module || !nodeObjectsById || renderer._disposed === true ||
+            renderer._module !== module || module.nodeObjectsById !== nodeObjectsById ||
+            renderer.isInLODMode !== false || module.isLoading === true ||
+            isPrewarmInteractionActive(module) || renderer._hasPendingImageAtlasWork?.() === true ||
+            state.imageCandidateIds?.size !== state.imagePreparedIds?.size ||
+            typeof renderer._updateImageInstanceData !== 'function' ||
+            typeof renderer._applyImageInstanceData !== 'function') return false;
+
+        const committedIds = Array.isArray(renderer.imageInstanceData?.nodeIds)
+            ? renderer.imageInstanceData.nodeIds
+            : [];
+        const committedSet = new Set(committedIds);
+        let missingPreparedImage = false;
+        for (const nodeId of state.imagePreparedIds) {
+            if (!committedSet.has(nodeId)) {
+                missingPreparedImage = true;
+                break;
+            }
+        }
+        if (!missingPreparedImage && renderer._imageInstancesDirty !== true) return false;
+
+        renderer._updateImageInstanceData(nodeObjectsById, true);
+        renderer._applyImageInstanceData();
+        renderer._lastAppliedImageAtlasSignature =
+            renderer._pendingImageAtlasPatchSignature ||
+            renderer._buildImageAtlasPatchSignature?.() || '';
+        renderer._pendingImageAtlasPatchSignature = '';
+        renderer._imageAtlasRebuildPending = false;
+        renderer._imageAtlasRebuildDeferredUntil = 0;
+        renderer._clearImageInstancesDirty?.();
+        renderer._syncResidentCountsAfterDelta?.();
+        if (renderer.instancedImageMesh) renderer.instancedImageMesh.visible = false;
+        renderer._residentGpuWarmKey = '';
+        renderer._residentGpuWarmOffscreenComplete = false;
+        renderer._residentImageIdlePatchCount = Number(renderer._residentImageIdlePatchCount || 0) + 1;
+        return true;
+    }
+
+    function stagePreparedResidentLineRow(state, entry, lineData) {
+        const renderer = state?.renderer;
+        const model = entry?.model || null;
+        const nodeId = String(model?.id || model?.Id || '');
+        const nodeIds = renderer?.instanceData?.nodeIds;
+        const geometry = renderer?.instancedMesh?.geometry || null;
+        const lineCountAttr = geometry?.getAttribute?.('instanceLineCount') || null;
+        const lineHeightAttr = geometry?.getAttribute?.('instanceLineHeightPx') || null;
+        const linePaddingAttr = geometry?.getAttribute?.('instanceLinePaddingPx') || null;
+        const lineDataArray = renderer?.lineDataArray || null;
+        const rowCount = Number(renderer?.lineTextureRows || 0);
+        if (!nodeId || !Array.isArray(nodeIds) || !lineData || !lineCountAttr || !lineHeightAttr ||
+            !linePaddingAttr || !lineDataArray || rowCount <= 0) return false;
+        if (state.lineNodeIds !== nodeIds) {
+            state.lineNodeIds = nodeIds;
+            state.lineIndexById = new Map();
+            for (let i = 0; i < nodeIds.length; i++) state.lineIndexById.set(String(nodeIds[i] || ''), i);
+        }
+        const index = state.lineIndexById.get(nodeId);
+        const rowWidth = Math.floor(lineDataArray.length / rowCount);
+        if (!Number.isInteger(index) || index < 0 || index >= lineCountAttr.count || rowWidth <= 0) return false;
+        const lineCounts = renderer.instanceData.lineCounts || (renderer.instanceData.lineCounts = []);
+        const lineLengths = renderer.instanceData.lineLengths || (renderer.instanceData.lineLengths = []);
+        const lineHeights = renderer.instanceData.lineHeights || (renderer.instanceData.lineHeights = []);
+        const linePaddings = renderer.instanceData.linePaddings || (renderer.instanceData.linePaddings = []);
+        const lineCount = Number(lineData.lineCount || 0);
+        const lineHeight = Number(lineData.lineHeightPx || 24);
+        const paddingX = Number(lineData.paddingX || 0);
+        const paddingY = Number(lineData.paddingY || 0);
+        lineCounts[index] = lineCount;
+        lineHeights[index] = lineHeight;
+        linePaddings[index * 2] = paddingX;
+        linePaddings[index * 2 + 1] = paddingY;
+        lineCountAttr.setX(index, lineCount);
+        lineHeightAttr.setX(index, lineHeight);
+        linePaddingAttr.setXY(index, paddingX, paddingY);
+        const base = index * rowWidth;
+        for (let j = 0; j < rowWidth; j++) {
+            const value = Number(lineData.lineLengths?.[j] || 0);
+            lineLengths[base + j] = value;
+            lineDataArray[base + j] = Math.max(0, Math.min(255, Math.round(value * 255)));
+        }
+        state.lineRowsStaged = true;
+        state.preparedLineRowCount = Number(state.preparedLineRowCount || 0) + 1;
+        return true;
+    }
+
+    function commitPreparedResidentLineRows(state) {
+        if (!state?.lineRowsStaged) return false;
+        const renderer = state.renderer;
+        const geometry = renderer?.instancedMesh?.geometry || null;
+        const lineCountAttr = geometry?.getAttribute?.('instanceLineCount') || null;
+        const lineHeightAttr = geometry?.getAttribute?.('instanceLineHeightPx') || null;
+        const linePaddingAttr = geometry?.getAttribute?.('instanceLinePaddingPx') || null;
+        if (!lineCountAttr || !lineHeightAttr || !linePaddingAttr || !renderer?.lineDataTexture) return false;
+        lineCountAttr.needsUpdate = true;
+        lineHeightAttr.needsUpdate = true;
+        linePaddingAttr.needsUpdate = true;
+        renderer.lineDataTexture.needsUpdate = true;
+        renderer.lineDataDirty = false;
+        renderer._lineDetailsPatchPending = false;
+        renderer._lastInstanceCount = Number(renderer.instanceData?.nodeIds?.length || 0);
+        renderer._residentGpuWarmKey = '';
+        renderer._residentLineBufferPrewarmCount = Number(state.preparedLineRowCount || 0);
+        state.lineRowsStaged = false;
+        return true;
+    }
+
+    function prepareIdleResidentBuffers(state) {
+        const renderer = state?.renderer;
+        const module = state?.module;
+        const nodeObjectsById = state?.nodeObjectsById;
+        if (!renderer || !module || !nodeObjectsById || renderer._disposed === true ||
+            renderer._module !== module || module.nodeObjectsById !== nodeObjectsById ||
+            renderer.isInLODMode !== false || renderer._hasResidentLodInstances?.() === true ||
+            module.isLoading === true || isPrewarmInteractionActive(module) ||
+            typeof renderer._updateInstanceData !== 'function' || typeof renderer._applyInstanceData !== 'function') return false;
+        renderer._residentBuildPhase = 'initial-build';
+        renderer._updateInstanceData(nodeObjectsById);
+        renderer._applyInstanceData();
+        renderer._syncResidentCountsAfterDelta?.();
+        renderer._lineDetailsPatchPending = renderer._residentLineFallbackUsed === true;
+        renderer._clearInstancesDirty?.();
+        renderer._clearImageInstancesDirty?.();
+        renderer._positionsOnlyDirty = false;
+        renderer._dirtyPositionIds?.clear?.();
+        renderer._residentRebuildPending = false;
+        renderer._residentRebuildDeferredUntil = 0;
+        renderer._noteResidentFullBuild?.('initial-build', 'MID');
+        renderer._residentIdleBuildCount = Number(renderer._residentIdleBuildCount || 0) + 1;
+        renderer._residentLineBufferPrewarmCount = Number(renderer.instanceData?.nodeIds?.length || 0);
+        renderer._residentGpuWarmKey = '';
+        [renderer.instancedMesh, renderer.instancedBorderLineMesh, renderer.instancedLineMesh,
+            renderer.instancedHaloMesh, renderer.instancedConsoleMesh, renderer.instancedImageMesh]
+            .filter(Boolean).forEach(mesh => { mesh.visible = false; });
+        renderer._setInstancedAgentBadgeVisibility?.(false);
+        renderer._setInstancedFarInsetBorderVisibility?.(false);
+        return renderer._hasResidentLodInstances?.() === true;
+    }
+
+    function retryResidentPreparation(state, delay = 80) {
+        if (!state || state.retryTimer) return;
+        state.retryTimer = setTimeout(() => {
+            state.retryTimer = null;
+            if (residentLinePrewarmStates.get(state.renderer) !== state || state.renderer?._disposed === true ||
+                state.renderer?._module !== state.module || state.module?.nodeObjectsById !== state.nodeObjectsById) return;
+            scheduleResidentLinePrewarm(state.renderer, state.module, state.nodeObjectsById);
+        }, delay);
+    }
+
     function queueResidentLinePrewarm(state) {
         if (!state || state.scheduled || state.complete) return;
         state.scheduled = true;
         const run = deadline => {
             state.scheduled = false;
             if (residentLinePrewarmStates.get(state.renderer) !== state || state.renderer?._disposed === true ||
-                state.renderer?._module !== state.module ||
-                state.module?.nodeObjectsById !== state.nodeObjectsById ||
-                state.module?.isLoading === true ||
+                state.renderer?._module !== state.module || state.module?.nodeObjectsById !== state.nodeObjectsById) return;
+            if (state.module?.isLoading === true ||
                 state.key !== `${Number(state.renderer?._instancesDirtySerial || 0)}:${Number(state.nodeObjectsById.size || 0)}` ||
                 isPrewarmInteractionActive(state.module)) {
+                retryResidentPreparation(state);
                 return;
             }
             if (!state.entries) state.entries = Array.from(state.nodeObjectsById.values());
@@ -249,6 +1006,8 @@
                         rememberPreparedLine(state.renderer, entry, width, height,
                             state.renderer._getLineDataForNode?.(model, entry.lodSeed, width, height, entry));
                     }
+                    stagePreparedResidentLineRow(state, entry,
+                        getPreparedLineData(state.renderer, entry, width, height));
                     state.prepared++;
                 } else if (model && contentType === 'image') {
                     const nodeId = String(model.id || model.Id || '');
@@ -266,6 +1025,7 @@
             if (state.cursor >= state.entries.length) {
                 if (state.pendingImageEntries.length > 0 && state.imagePass < 20) {
                     const isFirstImagePass = state.imagePass === 0;
+                    if (isFirstImagePass) commitPreparedResidentLineRows(state);
                     if (isFirstImagePass) prepareImageAtlasCapacity(state.renderer, state.imageCandidateIds.size);
                     state.entries = Array.from(new Set(state.pendingImageEntries));
                     state.pendingImageEntries.length = 0;
@@ -280,6 +1040,8 @@
                     }
                     return;
                 }
+                prepareIdleResidentBuffers(state);
+                commitPreparedResidentLineRows(state);
                 state.complete = true;
                 state.renderer._residentLinePrewarmCount = state.prepared;
                 state.renderer._residentImagePrewarmCount = state.imagePreparedIds.size;
@@ -288,6 +1050,7 @@
                 if (state.renderer.isInLODMode === true && state.renderer._lineDetailsPatchPending === true) {
                     state.renderer._markLineDetailsDirty?.();
                 }
+                prepareIdleResidentImageInstances(state);
                 queueResidentGpuWarm(state);
                 return;
             }
@@ -301,7 +1064,76 @@
     }
 
     function getResidentGpuKey(renderer) {
-        return `${Number(renderer?.lineDataTexture?.version || 0)}:${Number(renderer?.imageAtlasTexture?.version || 0)}:${Number(renderer?.lineTextureRows || 0)}`;
+        const geometryKey = [renderer?.instancedMesh, renderer?.instancedBorderLineMesh, renderer?.instancedLineMesh,
+            renderer?.instancedHaloMesh, renderer?.instancedConsoleMesh, renderer?.instancedImageMesh]
+            .map(mesh => String(mesh?.geometry?.uuid || '-')).join(',');
+        return `${Number(renderer?._residentGpuContextGeneration || 0)}:` +
+            `${String(renderer?.lineDataTexture?.uuid || '-')}/${Number(renderer?.lineDataTexture?.version || 0)}:` +
+            `${String(renderer?.imageAtlasTexture?.uuid || '-')}/${Number(renderer?.imageAtlasTexture?.version || 0)}:` +
+            `${Number(renderer?.lineTextureRows || 0)}:${geometryKey}`;
+    }
+
+    function invalidateResidentGpuWarm(renderer) {
+        if (!renderer) return;
+        renderer._residentGpuContextGeneration = Number(renderer._residentGpuContextGeneration || 0) + 1;
+        renderer._residentGpuWarmKey = '';
+        renderer._residentGpuWarmComplete = false;
+        renderer._residentGpuWarmOffscreenComplete = false;
+        renderer._residentImageAtlasWarmVersion = -1;
+    }
+
+    function ensureResidentGpuContextTracking(renderer) {
+        const canvas = renderer?.renderer?.domElement || null;
+        if (!canvas?.addEventListener || renderer._residentGpuContextCanvas === canvas) return;
+        const previousCanvas = renderer._residentGpuContextCanvas;
+        if (previousCanvas?.removeEventListener) {
+            previousCanvas.removeEventListener('webglcontextlost', renderer._residentGpuContextLostHandler);
+            previousCanvas.removeEventListener('webglcontextrestored', renderer._residentGpuContextRestoredHandler);
+        }
+        const lost = () => {
+            renderer._residentGpuContextLost = true;
+            invalidateResidentGpuWarm(renderer);
+        };
+        const restored = () => {
+            renderer._residentGpuContextLost = false;
+            invalidateResidentGpuWarm(renderer);
+            setTimeout(() => {
+                const state = residentLinePrewarmStates.get(renderer);
+                if (state && renderer?._disposed !== true) queueResidentGpuWarm(state);
+            }, 0);
+        };
+        canvas.addEventListener('webglcontextlost', lost);
+        canvas.addEventListener('webglcontextrestored', restored);
+        renderer._residentGpuContextCanvas = canvas;
+        renderer._residentGpuContextLostHandler = lost;
+        renderer._residentGpuContextRestoredHandler = restored;
+    }
+
+    function renderResidentWarmScene(webglRenderer, THREE, warmScene, warmCamera) {
+        const gl = webglRenderer?.getContext?.();
+        if (!gl || gl.isContextLost?.() === true) return false;
+        if (typeof webglRenderer.getRenderTarget !== 'function' || typeof webglRenderer.setRenderTarget !== 'function' ||
+            typeof webglRenderer.render !== 'function' || !THREE?.WebGLRenderTarget) return null;
+        const previousTarget = webglRenderer.getRenderTarget();
+        const previousFace = webglRenderer.getActiveCubeFace?.() ?? 0;
+        const previousMip = webglRenderer.getActiveMipmapLevel?.() ?? 0;
+        const warmTarget = new THREE.WebGLRenderTarget(1, 1, { depthBuffer: false, stencilBuffer: false });
+        if (warmTarget.texture) {
+            warmTarget.texture.generateMipmaps = false;
+            const encoding = previousTarget?.texture?.encoding ?? webglRenderer.outputEncoding;
+            if (encoding != null) warmTarget.texture.encoding = encoding;
+        }
+        try {
+            webglRenderer.setRenderTarget(warmTarget);
+            webglRenderer.render(warmScene, warmCamera);
+            return gl.isContextLost?.() !== true;
+        } finally {
+            try {
+                webglRenderer.setRenderTarget(previousTarget, previousFace, previousMip);
+            } finally {
+                warmTarget.dispose?.();
+            }
+        }
     }
 
     function retryResidentGpuWarm(state) {
@@ -324,6 +1156,9 @@
             return;
         }
         const webglRenderer = renderer?.renderer || null;
+        ensureResidentGpuContextTracking(renderer);
+        const gl = webglRenderer?.getContext?.();
+        if (renderer?._residentGpuContextLost === true || gl?.isContextLost?.() === true) return;
         const gpuKey = getResidentGpuKey(renderer);
         if (!webglRenderer || renderer._residentGpuWarmKey === gpuKey) return;
         if (renderer._hasPendingImageAtlasWork?.() === true) {
@@ -340,6 +1175,7 @@
                 retryResidentGpuWarm(state);
                 return;
             }
+            if (renderer?._residentGpuContextLost === true || webglRenderer?.getContext?.()?.isContextLost?.() === true) return;
             try {
                 if (renderer.lineDataTexture) webglRenderer.initTexture?.(renderer.lineDataTexture);
                 if (renderer.imageAtlasTexture && Number(renderer.imageAtlasSlots?.size || 0) > 0) {
@@ -349,18 +1185,25 @@
                 const THREE = globalThis.THREE;
                 if (THREE?.Scene && typeof webglRenderer.compile === 'function' && state.module?.camera) {
                     const warmScene = new THREE.Scene();
-                    [renderer.instancedMesh, renderer.instancedBorderLineMesh, renderer.instancedLineMesh,
-                        renderer.instancedHaloMesh, renderer.instancedConsoleMesh, renderer.instancedImageMesh]
-                        .filter(Boolean)
-                        .forEach(mesh => {
-                            const clone = mesh.clone?.();
-                            if (!clone) return;
-                            clone.visible = true;
-                            clone.frustumCulled = false;
-                            warmScene.add(clone);
-                        });
-                    webglRenderer.compile(warmScene, state.module.camera);
-                    warmScene.clear?.();
+                    try {
+                        [renderer.instancedMesh, renderer.instancedBorderLineMesh, renderer.instancedLineMesh,
+                            renderer.instancedHaloMesh, renderer.instancedConsoleMesh, renderer.instancedImageMesh]
+                            .filter(Boolean)
+                            .forEach(mesh => {
+                                const clone = mesh.clone?.();
+                                if (!clone) return;
+                                clone.visible = true;
+                                clone.frustumCulled = false;
+                                warmScene.add(clone);
+                            });
+                        const warmCamera = state.module.camera.clone?.() || state.module.camera;
+                        webglRenderer.compile(warmScene, warmCamera);
+                        const offscreenResult = renderResidentWarmScene(webglRenderer, THREE, warmScene, warmCamera);
+                        if (offscreenResult === false) return;
+                        renderer._residentGpuWarmOffscreenComplete = offscreenResult === true;
+                    } finally {
+                        warmScene.clear?.();
+                    }
                 }
                 renderer._residentGpuWarmKey = getResidentGpuKey(renderer);
                 renderer._residentGpuWarmComplete = true;
@@ -381,6 +1224,7 @@
 
     function scheduleResidentLinePrewarm(renderer, module, nodeObjectsById) {
         if (!renderer || !module || !nodeObjectsById?.values || module.isLoading === true) return;
+        scheduleResidentCssLayoutWarm(renderer, module, nodeObjectsById);
         const key = `${Number(renderer._instancesDirtySerial || 0)}:${Number(nodeObjectsById.size || 0)}`;
         let state = residentLinePrewarmStates.get(renderer);
         if (!state || state.key !== key || state.nodeObjectsById !== nodeObjectsById) {
@@ -395,7 +1239,7 @@
             prepareImageAtlasCapacity(renderer, imageCandidateIds.size);
             state = {
                 renderer, module, nodeObjectsById, key, entries, cursor: 0, prepared: 0,
-                scheduled: false, complete: false, gpuScheduled: false, gpuRetryTimer: null, gpuFailureCount: 0,
+                scheduled: false, retryTimer: null, complete: false, gpuScheduled: false, gpuRetryTimer: null, gpuFailureCount: 0,
                 imagePass: 0, imageCandidateIds, imagePreparedIds: new Set(), pendingImageEntries: []
             };
             residentLinePrewarmStates.set(renderer, state);
@@ -420,7 +1264,10 @@
             }
         }
         queueResidentLinePrewarm(state);
-        if (state.complete) queueResidentGpuWarm(state);
+        if (state.complete) {
+            prepareIdleResidentImageInstances(state);
+            queueResidentGpuWarm(state);
+        }
     }
 
     function areResidentLinesPrepared(renderer, nodeObjectsById, nodeIds) {
@@ -511,6 +1358,46 @@
         return Number(values[Math.max(0, Math.ceil(values.length * ratio) - 1)].toFixed(2));
     }
 
+    function getImageAtlasProbe(renderer) {
+        const canvas = renderer?.imageAtlasCanvas || null;
+        const readyEntry = Array.from(renderer?.imageAtlasSlots?.entries?.() || [])
+            .find(([, slot]) => slot?.ready === true) || null;
+        if (!canvas || !readyEntry) return '-';
+        try {
+            const slot = readyEntry[1];
+            const columns = Number(renderer.imageAtlasColumns || 1);
+            const tile = Math.max(1, Math.floor(Number(canvas.width || 1) / columns));
+            const col = Number(slot.slotIndex || 0) % columns;
+            const row = Math.floor(Number(slot.slotIndex || 0) / columns);
+            const context = canvas.getContext?.('2d', { alpha: false }) || null;
+            const pixel = context?.getImageData?.(
+                Math.min(canvas.width - 1, Math.floor(col * tile + tile * 0.5)),
+                Math.min(canvas.height - 1, Math.floor(row * tile + tile * 0.5)), 1, 1)?.data;
+            let colored = 0;
+            let sampled = 0;
+            for (const [, candidate] of Array.from(renderer.imageAtlasSlots.entries()).slice(0, 24)) {
+                if (candidate?.ready !== true) continue;
+                const candidateCol = Number(candidate.slotIndex || 0) % columns;
+                const candidateRow = Math.floor(Number(candidate.slotIndex || 0) / columns);
+                const sample = context?.getImageData?.(
+                    Math.min(canvas.width - 1, Math.floor(candidateCol * tile + tile * 0.5)),
+                    Math.min(canvas.height - 1, Math.floor(candidateRow * tile + tile * 0.5)), 1, 1)?.data;
+                if (sample) {
+                    sampled++;
+                    if (Math.abs(sample[0] - 238) + Math.abs(sample[1] - 242) + Math.abs(sample[2] - 247) > 12) colored++;
+                }
+            }
+            const cpuUv = Array.from(renderer?.imageInstanceData?.uvRects || []).slice(0, 4)
+                .map(value => Number(value || 0).toFixed(4)).join(',');
+            const uvAttr = renderer?.instancedImageMesh?.geometry?.getAttribute?.('instanceUvRect') || null;
+            const gpuUv = uvAttr && uvAttr.count > 0
+                ? [uvAttr.getX(0), uvAttr.getY(0), uvAttr.getZ(0), uvAttr.getW(0)]
+                    .map(value => Number(value || 0).toFixed(4)).join(',')
+                : '-';
+            return pixel ? `${pixel[0]},${pixel[1]},${pixel[2]} · color ${colored}/${sampled} · uv ${cpuUv}/${gpuUv}` : '-';
+        } catch { return 'blocked'; }
+    }
+
     function getDiagnostics(renderer) {
         const state = renderer ? frameSampleStates.get(renderer) : null;
         let stableFullResSampleCount = 0;
@@ -528,14 +1415,43 @@
             visibilityP95Ms: percentile(state, 'visibilityMs', 0.95),
             viewSyncP95Ms: percentile(state, 'viewSyncMs', 0.95),
             css3dRenderP95Ms: percentile(state, 'css3dRenderMs', 0.95),
+            fullResCssStableReuseCount: Number(renderer?._fullResCssStableReuseCount || 0),
+            cssMediaFrameDomReuseCount,
+            cssMediaFrameDomApplyCount,
             residentLinePrewarmCount: Number(renderer?._residentLinePrewarmCount || 0),
+            residentLineBufferPrewarmCount: Number(renderer?._residentLineBufferPrewarmCount || 0),
+            residentIdleBuildCount: Number(renderer?._residentIdleBuildCount || 0),
             residentImagePrewarmCount: Number(renderer?._residentImagePrewarmCount || 0),
             residentImagePrewarmCandidateCount: Number(renderer?._residentImagePrewarmCandidateCount || 0),
             residentImageBufferReuseCount: Number(renderer?._residentImageBufferReuseCount || 0),
+            residentImageIdlePatchCount: Number(renderer?._residentImageIdlePatchCount || 0),
+            residentImageInstanceCount: Number(renderer?.instancedImageMesh?.geometry?.instanceCount || 0),
+            residentImageMeshVisible: renderer?.instancedImageMesh?.visible === true,
+            residentImageAtlasReadyCount: Array.from(renderer?.imageAtlasSlots?.values?.() || [])
+                .filter(slot => slot?.ready === true).length,
+            residentImageAtlasProbe: getImageAtlasProbe(renderer),
+            residentBuildPhase: String(renderer?._residentBuildPhase || ''),
+            residentFullBuildCount: Number(renderer?._residentFullBuildCount || 0),
+            residentLastFullBuildReason: String(renderer?._lastResidentFullBuildReason || ''),
+            residentInstancesDirtyReason: renderer?._instancesDirty === true
+                ? String(renderer?._instancesDirtyReason || 'unknown')
+                : '',
+            residentInstancesDirtySerial: Number(renderer?._instancesDirtySerial || 0),
+            residentLastNodeCount: Number(renderer?._lastNodeCount || 0),
+            residentEligibleTextLikeCount: Number(renderer?._cachedEligibleTextLikeCount || 0),
+            residentBufferNodeCount: Number(renderer?.instanceData?.nodeIds?.length || 0),
+            residentCssParkCount: Number(renderer?._residentCssParkCount || 0),
+            residentCssRestoreCount: Number(renderer?._residentCssRestoreCount || 0),
+            residentCssRestoreMissCount: Number(renderer?._residentCssRestoreMissCount || 0),
+            residentCssLayoutWarmCount: Number(renderer?._residentCssLayoutWarmCount || 0),
+            residentStableLineReuseCount: Number(renderer?._residentStableLineReuseCount || 0),
+            residentBoostClearCount: Number(renderer?._residentBoostClearCount || 0),
             lineTextureRows: Number(renderer?.lineTextureRows || 0),
             residentGpuWarmComplete: !!renderer &&
                 renderer._hasPendingImageAtlasWork?.() !== true &&
                 renderer._residentGpuWarmKey === getResidentGpuKey(renderer),
+            residentGpuBufferWarmComplete: !!renderer && renderer._residentGpuWarmOffscreenComplete === true &&
+                renderer._residentGpuWarmKey === getResidentGpuKey(renderer),
             residentAtlasWarmComplete: !!renderer && Number(renderer.imageAtlasSlots?.size || 0) > 0 &&
                 renderer._hasPendingImageAtlasWork?.() !== true &&
                 Number(renderer._residentImageAtlasWarmVersion ?? -1) === Number(renderer.imageAtlasTexture?.version || 0)
@@ -547,9 +1463,16 @@
         frameSampleStates.delete(renderer);
         renderer._fullResStablePlanSkipCount = 0;
         renderer._lastFullResStablePlanSkipped = false;
+        renderer._fullResCssStableReuseCount = 0;
+        cssMediaFrameDomReuseCount = 0;
+        cssMediaFrameDomApplyCount = 0;
     }
 
     window.MindMapRenderPlan = Object.freeze({
+        configureImageAtlasTexture,
+        getImageAtlasOutputColorChunk,
+        syncCommittedResidentTextCount,
+        clearFullResImageVisuals,
         buildFullResKey,
         shouldSkipStableFullRes,
         commitStableFullRes,
@@ -559,9 +1482,28 @@
         areResidentLinesPrepared,
         initialLineTextureRows,
         ensureLineTextureCapacity,
+        renderResidentWarmScene,
         prepareImageAtlasCapacity,
         fallbackBatch,
+        reuseCssMediaFrameDom,
+        reuseStableVisibleCss,
+        reuseActiveCssMediaFallback,
+        hasAnimatedGifCssFallbackCandidates,
+        hasResidentDirtyWork,
+        hasPendingNearCssWarmup,
         reusePreparedImageInstances,
+        prepareIdleResidentImageInstances,
+        stagePreparedResidentLineRow,
+        commitPreparedResidentLineRows,
+        prepareIdleResidentBuffers,
+        beginResidentCssTransition,
+        cachePreparedResidentCss,
+        scheduleResidentCssLayoutWarm,
+        parkFullResCss,
+        parkReadyResidentImage,
+        restoreParkedFullResCss,
+        completeFullResTransition,
+        ensureResidentLineDetails,
         beginFrame,
         recordFrame,
         getDiagnostics,