@mindexec/cli 0.2.219 → 0.2.221

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

@@ -5,7 +5,7 @@
     const DEBUG = false;
     const FPS_DEBUG = false;
     const FRAME_PERF_DEBUG = false;
-const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
+    const MINDMAP_CORE_BUILD_ID = '20260619-motion-hidden-work-v668';
     const CanvasPhase = Object.freeze({
         Booting: 'booting',
         BoardFileLoading: 'board-file-loading',
@@ -94,7 +94,19 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
     const VISIBILITY_CULLING_ZOOM_HEAVY_FRAME_INTERVAL = 10;
     const FULL_RES_VISIBILITY_CULLING_PAN_FRAME_INTERVAL = 10;
     const FULL_RES_VISIBILITY_EXIT_MARGIN_SCALE = 1.8;
-    const CAMERA_MOTION_WEBGL_FRAME_INTERVAL = 10;
+    const CAMERA_MOTION_WEBGL_FRAME_INTERVAL = 1;
+    const CAMERA_MOTION_GRID_HIDE_DELAY_MS = 90;
+    const CAMERA_MOTION_GRID_MIN_STEP_PX = 3;
+    const CAMERA_MOTION_GRID_MAX_STEP_PX = 48;
+    const CAMERA_MOTION_GRID_OVERSCAN_PX = 512;
+    const CAMERA_MOTION_GRID_Z_BUCKET_WORLD = 80;
+    const CAMERA_MOTION_GRID_FALLBACK_ENABLED = false;
+    const CAMERA_MOTION_PARTIAL_FRAME_SKIP_ENABLED = false;
+    const CAMERA_MOTION_VISUAL_ONLY_FAST_PATH_ENABLED = true;
+    const CAMERA_MOTION_WEBGL_CANVAS_TRANSFORM_ENABLED = true;
+    const CAMERA_STATIONARY_INTERACTION_FRAME_DELAY_MS = 48;
+    const CAMERA_MOTION_GLOBAL_STYLE_CLASS_ENABLED = false;
+    const CAMERA_DENSE_GLOBAL_STYLE_CLASS_ENABLED = false;
     const PIPELINE_PROFILE_SECTION_KEYS = Object.freeze([
         'pipelineViewport',
         'pipelineScheduling',
@@ -306,8 +318,9 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
             return false;
         }
 
-        const width = Math.max(1, Number(module.container.clientWidth || 0));
-        const height = Math.max(1, Number(module.container.clientHeight || 0));
+        const viewportMetrics = getCachedViewportMetrics(module);
+        const width = Math.max(1, Number(viewportMetrics.width || 0));
+        const height = Math.max(1, Number(viewportMetrics.height || 0));
         const camera = module.camera;
         const cursor = module.cursorPosition;
         const vfov = (camera.fov * Math.PI) / 180;
@@ -376,8 +389,27 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
         tintVideoLayoutInNear: false,
         disableNearVideoGlow: false
     };
+    const MINDCANVAS_PERF_CLASSES_ENABLED =
+        CAMERA_MOTION_GLOBAL_STYLE_CLASS_ENABLED === true ||
+        CAMERA_DENSE_GLOBAL_STYLE_CLASS_ENABLED === true;
+
+    function shouldSyncMindCanvasPerfClasses() {
+        return MINDCANVAS_PERF_CLASSES_ENABLED === true ||
+            !!(_mindCanvasPerfClassState.target &&
+                (_mindCanvasPerfClassState.moving || _mindCanvasPerfClassState.dense));
+    }
 
     function syncMindCanvasPerfClasses({ moving = false, dense = false } = {}) {
+        if (MINDCANVAS_PERF_CLASSES_ENABLED !== true) {
+            if (_mindCanvasPerfClassState.target &&
+                (_mindCanvasPerfClassState.moving || _mindCanvasPerfClassState.dense)) {
+                _mindCanvasPerfClassState.target.classList?.remove?.('mindcanvas-is-moving', 'mindcanvas-is-dense');
+            }
+            _mindCanvasPerfClassState.moving = false;
+            _mindCanvasPerfClassState.dense = false;
+            return;
+        }
+
         if (typeof document === 'undefined' || !document.body) {
             return;
         }
@@ -390,15 +422,51 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
         }
         _mindCanvasPerfClassState.target = targetElement;
 
-        if (_mindCanvasPerfClassState.moving !== moving) {
-            targetElement.classList.toggle('mindcanvas-is-moving', moving);
-            _mindCanvasPerfClassState.moving = moving;
+        const normalizedMoving = CAMERA_MOTION_GLOBAL_STYLE_CLASS_ENABLED === true && moving === true;
+        const normalizedDense = CAMERA_DENSE_GLOBAL_STYLE_CLASS_ENABLED === true && dense === true;
+
+        if (_mindCanvasPerfClassState.moving !== normalizedMoving) {
+            targetElement.classList.toggle('mindcanvas-is-moving', normalizedMoving);
+            _mindCanvasPerfClassState.moving = normalizedMoving;
+        }
+
+        if (_mindCanvasPerfClassState.dense !== normalizedDense) {
+            targetElement.classList.toggle('mindcanvas-is-dense', normalizedDense);
+            _mindCanvasPerfClassState.dense = normalizedDense;
+        }
+    }
+
+    function isContinuousBackgroundTheme(module) {
+        if (!module?.currentThemeObject || typeof window === 'undefined') {
+            return false;
+        }
+
+        const mode = window.MindMapThemes?.getAnimationMode?.(module.currentThemeName, module.currentThemeObject);
+        return mode === 'continuous';
+    }
+
+    function canUseWebglCanvasTransformForCameraMotion(module) {
+        if (CAMERA_MOTION_WEBGL_CANVAS_TRANSFORM_ENABLED !== true) {
+            return false;
+        }
+
+        // Static backgrounds can move as a single viewport surface. Continuous
+        // themes need real animation frames during interaction; freezing the
+        // last WebGL canvas makes particle themes look like they are skipping.
+        if (isContinuousBackgroundTheme(module) === true) {
+            return false;
         }
 
-        if (_mindCanvasPerfClassState.dense !== dense) {
-            targetElement.classList.toggle('mindcanvas-is-dense', dense);
-            _mindCanvasPerfClassState.dense = dense;
+        return true;
+    }
+
+    function deferContinuousThemeForCameraMotion(module) {
+        if (!isContinuousBackgroundTheme(module)) {
+            return false;
         }
+
+        module._themeCameraMotionDeferred = true;
+        return true;
     }
 
     function syncRenderDebugBodyClasses(flags = {}) {
@@ -455,7 +523,8 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
         freezeVisibilityDuringMotion: false,
         freezeLodDuringMotion: false,
         enableFramePerfProbe: false,
-        enableCss3dWillChange: true,
+        sampleWebglDuringCameraMotion: false,
+        enableCss3dWillChange: false,
         enableThemeAnimation: true,
         enableMenuOverlayUi: true,
         enableMultiSelectOverlayUi: true,
@@ -684,6 +753,15 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
             };
         }
 
+        const cachedContainerWidth = Math.max(0, Number(module?._lastContainerWidth || 0));
+        const cachedContainerHeight = Math.max(0, Number(module?._lastContainerHeight || 0));
+        if (cachedContainerWidth > 0 && cachedContainerHeight > 0) {
+            return {
+                width: cachedContainerWidth,
+                height: cachedContainerHeight
+            };
+        }
+
         return {
             width: Math.max(1, Number(module?.container?.clientWidth || 0)),
             height: Math.max(1, Number(module?.container?.clientHeight || 0))
@@ -851,10 +929,170 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
         };
     }
 
+    function createEmptyFramePathStats(startedAt = 0) {
+        return {
+            total: 0,
+            visualOnly: 0,
+            stationaryVisual: 0,
+            residentVisual: 0,
+            earlyCameraOnly: 0,
+            css3dCameraFast: 0,
+            normal: 0,
+            visibilityCulling: 0,
+            lodUpdateCalled: 0,
+            css3dTransformSync: 0,
+            css3dRender: 0,
+            textOverlaySync: 0,
+            hiddenWork: 0,
+            visualOnlyPercent: 0,
+            cameraFastPercent: 0,
+            normalPercent: 0,
+            hiddenWorkPercent: 0,
+            lastMode: '',
+            lastReason: '',
+            lastViewSyncMode: '',
+            lastLodSkipReason: '',
+            lastVisibilitySkipReason: '',
+            startedAt: Number(startedAt || 0),
+            updatedAt: 0
+        };
+    }
+
+    function getFrameProfilePathMode(frameProfile) {
+        if (!frameProfile) {
+            return 'none';
+        }
+
+        if (frameProfile.uaUltraResidentCameraOnly === true) {
+            return 'ultra-resident-camera-only';
+        }
+
+        if (frameProfile.uaUltraEarlyCameraOnly === true) {
+            return 'ultra-camera-only';
+        }
+
+        if (frameProfile.uaVisualOnlyMotion === true) {
+            return 'visual-only';
+        }
+
+        if (frameProfile.uaStationaryVisualMotion === true) {
+            return 'stationary-visual';
+        }
+
+        if (frameProfile.uaResidentVisualOnlyMotion === true) {
+            return 'resident-visual';
+        }
+
+        const viewSyncMode = String(frameProfile.viewSyncMode || '');
+        if (viewSyncMode === 'ua-early-camera-only') {
+            return 'early-camera-only';
+        }
+
+        if (viewSyncMode === 'ua-stationary-camera-navigation') {
+            return 'stationary-camera-navigation';
+        }
+
+        if (frameProfile.usedCss3dCameraFastPath === true) {
+            return 'css3d-camera-fast';
+        }
+
+        return 'normal';
+    }
+
+    function updateFramePathStats(module, frameProfile, updatedAt = 0) {
+        if (!module || !frameProfile) {
+            return;
+        }
+
+        const now = Number(
+            updatedAt ||
+            (typeof performance !== 'undefined' && typeof performance.now === 'function'
+                ? performance.now()
+                : Date.now())
+        );
+        const previousStats = module._framePathStats || null;
+        const shouldStartWindow = !previousStats || Number(previousStats.total || 0) >= 600;
+        const stats = shouldStartWindow ? createEmptyFramePathStats(now) : previousStats;
+        const mode = getFrameProfilePathMode(frameProfile);
+        const visibilitySkipReason = String(frameProfile.visibilitySkipReason || '');
+        const lodSkipReason = String(frameProfile.lodUpdateSkipReason || frameProfile.lodSkipReason || '');
+        const viewSyncMode = String(frameProfile.viewSyncMode || '');
+        const hiddenWork =
+            frameProfile.shouldRunVisibilityCulling === true ||
+            frameProfile.lodUpdateCalled === true ||
+            frameProfile.shouldSyncCss3dTransforms === true ||
+            frameProfile.shouldRenderCss3d === true ||
+            frameProfile.shouldSyncTextOverlays === true;
+
+        stats.total += 1;
+        if (frameProfile.uaVisualOnlyMotion === true) {
+            stats.visualOnly += 1;
+        }
+        if (frameProfile.uaStationaryVisualMotion === true) {
+            stats.stationaryVisual += 1;
+        }
+        if (frameProfile.uaResidentVisualOnlyMotion === true ||
+            frameProfile.uaUltraResidentCameraOnly === true) {
+            stats.residentVisual += 1;
+        }
+        if (mode === 'ultra-camera-only' ||
+            mode === 'ultra-resident-camera-only' ||
+            mode === 'early-camera-only' ||
+            mode === 'stationary-camera-navigation') {
+            stats.earlyCameraOnly += 1;
+        }
+        if (frameProfile.usedCss3dCameraFastPath === true) {
+            stats.css3dCameraFast += 1;
+        }
+        if (mode === 'normal') {
+            stats.normal += 1;
+        }
+        if (frameProfile.shouldRunVisibilityCulling === true) {
+            stats.visibilityCulling += 1;
+        }
+        if (frameProfile.lodUpdateCalled === true) {
+            stats.lodUpdateCalled += 1;
+        }
+        if (frameProfile.shouldSyncCss3dTransforms === true) {
+            stats.css3dTransformSync += 1;
+        }
+        if (frameProfile.shouldRenderCss3d === true) {
+            stats.css3dRender += 1;
+        }
+        if (frameProfile.shouldSyncTextOverlays === true) {
+            stats.textOverlaySync += 1;
+        }
+        if (hiddenWork) {
+            stats.hiddenWork += 1;
+        }
+
+        const total = Math.max(1, Number(stats.total || 0));
+        const visualOnlyTotal = Number(stats.visualOnly || 0) +
+            Number(stats.stationaryVisual || 0) +
+            Number(stats.residentVisual || 0) +
+            Number(stats.earlyCameraOnly || 0);
+        stats.visualOnlyPercent = Number((visualOnlyTotal / total * 100).toFixed(1));
+        stats.cameraFastPercent = Number((Number(stats.css3dCameraFast || 0) / total * 100).toFixed(1));
+        stats.normalPercent = Number((Number(stats.normal || 0) / total * 100).toFixed(1));
+        stats.hiddenWorkPercent = Number((Number(stats.hiddenWork || 0) / total * 100).toFixed(1));
+        stats.lastMode = mode;
+        stats.lastReason = visibilitySkipReason || lodSkipReason || viewSyncMode || mode;
+        stats.lastViewSyncMode = viewSyncMode;
+        stats.lastLodSkipReason = lodSkipReason;
+        stats.lastVisibilitySkipReason = visibilitySkipReason;
+        stats.updatedAt = now;
+        module._framePathStats = stats;
+    }
+
     function resetFramePerfPeakProfile(module) {
         const peakProfile = createEmptyFramePerfPeakProfile();
         if (module) {
             module._framePerfPeakProfile = peakProfile;
+            module._framePathStats = createEmptyFramePathStats(
+                typeof performance !== 'undefined' && typeof performance.now === 'function'
+                    ? performance.now()
+                    : Date.now()
+            );
         }
         return peakProfile;
     }
@@ -865,6 +1103,7 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
         }
 
         const peakProfile = module._framePerfPeakProfile || resetFramePerfPeakProfile(module);
+        updateFramePathStats(module, frameProfile, updatedAt);
         let changed = false;
         const durationMs = Number(frameProfile.durationMs || 0);
         if (durationMs > Number(peakProfile.durationMs || 0)) {
@@ -898,6 +1137,442 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
         }
     }
 
+    function tryRunUltraEarlyCameraOnlyFrame(module, loop, frameStart, isCameraMoving, shouldCaptureFramePerf, frameProfTimes, profileSection) {
+        if (!module ||
+            CAMERA_MOTION_VISUAL_ONLY_FAST_PATH_ENABLED !== true ||
+            isCameraMoving !== true ||
+            module.isLoading === true ||
+            module.isSelecting === true ||
+            module.isDraggingNode === true ||
+            module.isDraggingMultipleNodes === true ||
+            module.isResizing === true ||
+            module.isWindowResizing === true ||
+            !module.cssRenderer ||
+            typeof module.cssRenderer.renderCamera !== 'function' ||
+            !module.camera) {
+            return false;
+        }
+
+        const renderDebugFlags = module.renderDebugFlags || getRenderDebugFlagsSnapshot();
+        if (renderDebugFlags.enableCss3d === false) {
+            return false;
+        }
+
+        if (module.lodRenderer?.isInLODMode === true) {
+            return false;
+        }
+
+        const forceUpdateFrames = Math.max(0, Number(module._forceUpdateFrames || 0));
+        const cameraNavigationForceFrames = Math.max(0, Number(module._cameraNavigationForceFrames || 0));
+        const panLiveRefreshForceFrames = Math.max(0, Number(module._panLiveRefreshForceFrames || 0));
+        const hasForcedUpdate = forceUpdateFrames > 0;
+        const hasOnlyCameraNavigationForcedUpdate =
+            hasForcedUpdate &&
+            (module.isPanning === true || module.isZooming === true || isCameraMoving === true) &&
+            cameraNavigationForceFrames >= forceUpdateFrames;
+        const hasOnlyPanLiveRefreshForcedUpdate =
+            hasForcedUpdate &&
+            module.isPanning === true &&
+            module.isZooming !== true &&
+            panLiveRefreshForceFrames >= forceUpdateFrames;
+        const hasNonCameraNavigationForcedUpdate =
+            hasForcedUpdate &&
+            hasOnlyCameraNavigationForcedUpdate !== true &&
+            hasOnlyPanLiveRefreshForcedUpdate !== true;
+        if (hasNonCameraNavigationForcedUpdate) {
+            return false;
+        }
+
+        const hasEditingTextOverlayFocus = !!(
+            String(module._textOverlayV2State?.editing?.nodeId || '').trim() ||
+            String(module._editingOverlayState?.nodeId || '').trim()
+        );
+        if (hasEditingTextOverlayFocus) {
+            return false;
+        }
+
+        const hasPendingCss3dStructuralTransformWork = !!(
+            (module._cssTransformDirtyIds?.size || 0) > 0 ||
+            module._cssParentRepairNeeded === true
+        );
+        if (hasPendingCss3dStructuralTransformWork) {
+            return false;
+        }
+
+        const hasPendingCss3dVisualWork = !!(
+            module._css3dVisualChangedThisFrame === true ||
+            module._css3dVisualChangedSinceLastRender === true
+        );
+        if (hasPendingCss3dVisualWork) {
+            module._css3dVisualDeferredForMotion = true;
+        }
+
+        if (hasForcedUpdate) {
+            module._forceUpdateFrames = Math.max(0, forceUpdateFrames - 1);
+            if (cameraNavigationForceFrames > 0) {
+                module._cameraNavigationForceFrames = Math.max(0, cameraNavigationForceFrames - 1);
+            }
+            if (panLiveRefreshForceFrames > 0) {
+                module._panLiveRefreshForceFrames = Math.max(0, panLiveRefreshForceFrames - 1);
+            }
+        }
+
+        module._fullResMotionFrozen = true;
+        module._wasViewStateMotionFrozenLastFrame = true;
+        module._wasLodMotionFrozenLastFrame = false;
+        module._fullResVisibilityReconcilePending = true;
+        module._preserveVisibleSetThisFrame = true;
+        module._lastVisibilityCullingSkipReason = 'ua-ultra-camera-only';
+        if (module._overlayDirty === true ||
+            String(module._textOverlayV2State?.selectionNodeId || '').trim() ||
+            String(module._selectableTextOverlayNodeId || '').trim()) {
+            module._deferPassiveOverlayRefresh = true;
+        }
+
+        if (shouldSyncMindCanvasPerfClasses()) {
+            const visibleNodeCount = Number(module._visibleIds?.size || module._prevVisibleIds?.size || 0);
+            const totalNodeCount = Number(module.nodeObjectsById?.size || 0);
+            syncMindCanvasPerfClasses({
+                moving: true,
+                dense:
+                    visibleNodeCount >= DENSE_VISIBLE_NODE_THRESHOLD ||
+                    totalNodeCount >= DENSE_TOTAL_NODE_THRESHOLD
+            });
+        }
+
+        updateCursorDomElement(module);
+
+        const isWebglRenderEnabled = renderDebugFlags.enableWebglRender !== false;
+        let usedWebglCanvasCameraTransform = false;
+        if (isWebglRenderEnabled && module.renderer && module.scene && module.camera) {
+            const canReuseWebglCanvas = !!(
+                canUseWebglCanvasTransformForCameraMotion(module) === true &&
+                module._lastWebglRenderedCameraState &&
+                module.renderer?.domElement
+            );
+            if (canReuseWebglCanvas === true) {
+                deferContinuousThemeForCameraMotion(module);
+                usedWebglCanvasCameraTransform = module._applyWebglCanvasCameraTransform?.() === true;
+                module._webglCameraMotionDeferred = true;
+                module._lastWebglRenderInfo = {
+                    calls: 0,
+                    triangles: 0,
+                    points: 0,
+                    lines: 0,
+                    skipped: true,
+                    webglCanvasCameraTransform: usedWebglCanvasCameraTransform === true,
+                    uaUltraEarlyCameraOnly: true
+                };
+            } else {
+                module._clearWebglCanvasCameraTransform?.();
+                module.renderer.render(module.scene, module.camera);
+                module._recordWebglRenderedCameraState?.();
+                const renderInfo = module.renderer?.info?.render || null;
+                module._lastWebglRenderInfo = renderInfo ? {
+                    calls: Number(renderInfo.calls || 0),
+                    triangles: Number(renderInfo.triangles || 0),
+                    points: Number(renderInfo.points || 0),
+                    lines: Number(renderInfo.lines || 0),
+                    uaUltraEarlyCameraOnly: true,
+                    webglCanvasCameraBootstrap: true
+                } : null;
+            }
+        }
+
+        module._syncMotionGridLayerForCameraNavigation?.(usedWebglCanvasCameraTransform);
+        module.cssRenderer.renderCamera(module.camera);
+
+        if ((module._businessAutomationEdgeVisualLayer?.isConnected ||
+            module._businessAutomationEdgeLayer?.isConnected) &&
+            window.MindMapCss3DManager?.syncBusinessAutomationEdgesForCameraMotion) {
+            const transformedEdges =
+                window.MindMapCss3DManager.syncBusinessAutomationEdgesForCameraMotion(module) === true;
+            module._businessAutomationEdgesDeferredForMotion = transformedEdges !== false;
+        }
+
+        profileSection?.('uaUltraEarlyCameraOnly');
+
+        const frameEnd = performance.now();
+        const frameDuration = frameEnd - frameStart;
+        module._lastFrameDurationMs = frameDuration;
+        module._lastFrameMetricsAt = frameEnd;
+        if (shouldCaptureFramePerf) {
+            const sectionTimes = {};
+            Object.entries(frameProfTimes || {})
+                .filter(([key, value]) => key !== 'visibleNodes' && typeof value === 'number')
+                .forEach(([key, value]) => {
+                    sectionTimes[key] = Number(value.toFixed(2));
+                });
+            module._lastFramePerfProfile = {
+                durationMs: Number(frameDuration.toFixed(2)),
+                update: false,
+                cameraZ: Number((module.camera?.position?.z || 0).toFixed(2)),
+                isZooming: module.isZooming === true,
+                isPanning: module.isPanning === true,
+                isCameraMoving: true,
+                isInLodMode: false,
+                lodBand: module.lodRenderer?._currentLodBand || null,
+                visibleNodes: Number(module._visibleIds?.size || module._prevVisibleIds?.size || 0),
+                freezeVisibility: true,
+                freezeLod: false,
+                freezeFullRes: true,
+                residentMidFarStable: false,
+                residentDirty: false,
+                residentBandChanging: false,
+                viewSyncMode: 'ua-ultra-camera-only',
+                lodUpdateCalled: false,
+                lodUpdateSkipped: true,
+                lodUpdateSkipReason: 'ua-ultra-camera-only',
+                lodSkipReason: '',
+                lodDirtyReason: '',
+                lodDirtyState: null,
+                viewSyncBreakdown: null,
+                shouldRunVisibilityCulling: false,
+                visibilityStableSkip: true,
+                visibilitySkipReason: 'ua-ultra-camera-only',
+                incrementalPanVisibility: false,
+                shouldSyncCss3dTransforms: false,
+                shouldRenderCss3d: false,
+                usedCss3dCameraFastPath: true,
+                uaUltraEarlyCameraOnly: true,
+                shouldSyncTextOverlays: false,
+                usedPassiveOverlayCameraFastPath: false,
+                passiveOverlaySuppressed: module._suppressPassiveDomOverlayDuringZoom === true,
+                webgl: module._lastWebglRenderInfo || null,
+                sections: sectionTimes
+            };
+            updateFramePerfPeakProfile(module, module._lastFramePerfProfile, frameEnd);
+        } else if (module._lastFramePerfProfile) {
+            module._lastFramePerfProfile = null;
+        }
+
+        module._lastAnimationLoopDelayMs = 0;
+        module._animationLoopExecuting = false;
+        module._scheduleAnimationLoop(loop, 0);
+        return true;
+    }
+
+    function tryRunUltraEarlyResidentCameraOnlyFrame(module, loop, frameStart, isCameraMoving, shouldCaptureFramePerf, frameProfTimes, profileSection) {
+        if (!module ||
+            CAMERA_MOTION_VISUAL_ONLY_FAST_PATH_ENABLED !== true ||
+            isCameraMoving !== true ||
+            module.isLoading === true ||
+            module.isSelecting === true ||
+            module.isDraggingNode === true ||
+            module.isDraggingMultipleNodes === true ||
+            module.isResizing === true ||
+            module.isWindowResizing === true ||
+            !module.camera ||
+            !module.lodRenderer ||
+            module.lodRenderer.isInLODMode !== true ||
+            typeof module.lodRenderer.canUseUltraResidentCameraOnlyFrame !== 'function' ||
+            module.lodRenderer.canUseUltraResidentCameraOnlyFrame(module.camera, module) !== true) {
+            return false;
+        }
+
+        const renderDebugFlags = module.renderDebugFlags || getRenderDebugFlagsSnapshot();
+        const isWebglRenderEnabled = renderDebugFlags.enableWebglRender !== false;
+        const isCss3dEnabled = renderDebugFlags.enableCss3d !== false;
+        const canRenderCss3dCamera = !!(
+            isCss3dEnabled === true &&
+            module.cssRenderer &&
+            typeof module.cssRenderer.renderCamera === 'function' &&
+            module.lodRenderer.hasCss3dLodCandidates?.() === true
+        );
+        if (isWebglRenderEnabled !== true && canRenderCss3dCamera !== true) {
+            return false;
+        }
+
+        const forceUpdateFrames = Math.max(0, Number(module._forceUpdateFrames || 0));
+        const cameraNavigationForceFrames = Math.max(0, Number(module._cameraNavigationForceFrames || 0));
+        const panLiveRefreshForceFrames = Math.max(0, Number(module._panLiveRefreshForceFrames || 0));
+        const hasForcedUpdate = forceUpdateFrames > 0;
+        const hasOnlyCameraNavigationForcedUpdate =
+            hasForcedUpdate &&
+            (module.isPanning === true || module.isZooming === true || isCameraMoving === true) &&
+            cameraNavigationForceFrames >= forceUpdateFrames;
+        const hasOnlyPanLiveRefreshForcedUpdate =
+            hasForcedUpdate &&
+            module.isPanning === true &&
+            module.isZooming !== true &&
+            panLiveRefreshForceFrames >= forceUpdateFrames;
+        const hasNonCameraNavigationForcedUpdate =
+            hasForcedUpdate &&
+            hasOnlyCameraNavigationForcedUpdate !== true &&
+            hasOnlyPanLiveRefreshForcedUpdate !== true;
+        if (hasNonCameraNavigationForcedUpdate) {
+            return false;
+        }
+
+        const hasEditingTextOverlayFocus = !!(
+            String(module._textOverlayV2State?.editing?.nodeId || '').trim() ||
+            String(module._editingOverlayState?.nodeId || '').trim()
+        );
+        if (hasEditingTextOverlayFocus) {
+            return false;
+        }
+
+        const hasPendingCss3dStructuralTransformWork = !!(
+            (module._cssTransformDirtyIds?.size || 0) > 0 ||
+            module._cssParentRepairNeeded === true
+        );
+        if (hasPendingCss3dStructuralTransformWork) {
+            return false;
+        }
+
+        const hasPendingCss3dVisualWork = !!(
+            module._css3dVisualChangedThisFrame === true ||
+            module._css3dVisualChangedSinceLastRender === true
+        );
+        if (hasPendingCss3dVisualWork) {
+            module._css3dVisualDeferredForMotion = true;
+        }
+
+        if (hasForcedUpdate) {
+            module._forceUpdateFrames = Math.max(0, forceUpdateFrames - 1);
+            if (cameraNavigationForceFrames > 0) {
+                module._cameraNavigationForceFrames = Math.max(0, cameraNavigationForceFrames - 1);
+            }
+            if (panLiveRefreshForceFrames > 0) {
+                module._panLiveRefreshForceFrames = Math.max(0, panLiveRefreshForceFrames - 1);
+            }
+        }
+
+        module._fullResMotionFrozen = false;
+        module._wasViewStateMotionFrozenLastFrame = false;
+        module._wasLodMotionFrozenLastFrame = true;
+        module._preserveVisibleSetThisFrame = true;
+        module._lastVisibilityCullingSkipReason = 'ua-ultra-resident-camera-only';
+        if (module._overlayDirty === true ||
+            String(module._textOverlayV2State?.selectionNodeId || '').trim() ||
+            String(module._selectableTextOverlayNodeId || '').trim()) {
+            module._deferPassiveOverlayRefresh = true;
+        }
+
+        if (shouldSyncMindCanvasPerfClasses()) {
+            const visibleNodeCount = Number(module._visibleIds?.size || module._prevVisibleIds?.size || 0);
+            const totalNodeCount = Number(module.nodeObjectsById?.size || 0);
+            syncMindCanvasPerfClasses({
+                moving: true,
+                dense:
+                    visibleNodeCount >= DENSE_VISIBLE_NODE_THRESHOLD ||
+                    totalNodeCount >= DENSE_TOTAL_NODE_THRESHOLD
+            });
+        }
+
+        updateCursorDomElement(module);
+
+        let usedWebglCanvasCameraTransform = false;
+        if (isWebglRenderEnabled === true && module.renderer && module.scene && module.camera) {
+            const canReuseWebglCanvas = !!(
+                canUseWebglCanvasTransformForCameraMotion(module) === true &&
+                module._lastWebglRenderedCameraState &&
+                module.renderer?.domElement
+            );
+            if (canReuseWebglCanvas === true) {
+                deferContinuousThemeForCameraMotion(module);
+                usedWebglCanvasCameraTransform = module._applyWebglCanvasCameraTransform?.() === true;
+                module._webglCameraMotionDeferred = true;
+                module._lastWebglRenderInfo = {
+                    calls: 0,
+                    triangles: 0,
+                    points: 0,
+                    lines: 0,
+                    skipped: true,
+                    webglCanvasCameraTransform: usedWebglCanvasCameraTransform === true,
+                    uaUltraResidentCameraOnly: true
+                };
+            } else {
+                module._clearWebglCanvasCameraTransform?.();
+                module.renderer.render(module.scene, module.camera);
+                module._recordWebglRenderedCameraState?.();
+                const renderInfo = module.renderer?.info?.render || null;
+                module._lastWebglRenderInfo = renderInfo ? {
+                    calls: Number(renderInfo.calls || 0),
+                    triangles: Number(renderInfo.triangles || 0),
+                    points: Number(renderInfo.points || 0),
+                    lines: Number(renderInfo.lines || 0),
+                    uaUltraResidentCameraOnly: true,
+                    webglCanvasCameraBootstrap: true
+                } : null;
+            }
+        }
+
+        module._syncMotionGridLayerForCameraNavigation?.(usedWebglCanvasCameraTransform);
+        if (canRenderCss3dCamera === true) {
+            module.cssRenderer.renderCamera(module.camera);
+        }
+
+        if ((module._businessAutomationEdgeVisualLayer?.isConnected ||
+            module._businessAutomationEdgeLayer?.isConnected) &&
+            window.MindMapCss3DManager?.syncBusinessAutomationEdgesForCameraMotion) {
+            const transformedEdges =
+                window.MindMapCss3DManager.syncBusinessAutomationEdgesForCameraMotion(module) === true;
+            module._businessAutomationEdgesDeferredForMotion = transformedEdges !== false;
+        }
+
+        profileSection?.('uaUltraResidentCameraOnly');
+
+        const frameEnd = performance.now();
+        const frameDuration = frameEnd - frameStart;
+        module._lastFrameDurationMs = frameDuration;
+        module._lastFrameMetricsAt = frameEnd;
+        if (shouldCaptureFramePerf) {
+            const sectionTimes = {};
+            Object.entries(frameProfTimes || {})
+                .filter(([key, value]) => key !== 'visibleNodes' && typeof value === 'number')
+                .forEach(([key, value]) => {
+                    sectionTimes[key] = Number(value.toFixed(2));
+                });
+            module._lastFramePerfProfile = {
+                durationMs: Number(frameDuration.toFixed(2)),
+                update: false,
+                cameraZ: Number((module.camera?.position?.z || 0).toFixed(2)),
+                isZooming: module.isZooming === true,
+                isPanning: module.isPanning === true,
+                isCameraMoving: true,
+                isInLodMode: true,
+                lodBand: module.lodRenderer?._currentLodBand || null,
+                visibleNodes: Number(module._visibleIds?.size || module._prevVisibleIds?.size || 0),
+                freezeVisibility: true,
+                freezeLod: true,
+                freezeFullRes: false,
+                residentMidFarStable: true,
+                residentDirty: false,
+                residentBandChanging: false,
+                viewSyncMode: 'ua-ultra-resident-camera-only',
+                lodUpdateCalled: false,
+                lodUpdateSkipped: true,
+                lodUpdateSkipReason: 'ua-ultra-resident-camera-only',
+                lodSkipReason: '',
+                lodDirtyReason: '',
+                lodDirtyState: null,
+                viewSyncBreakdown: null,
+                shouldRunVisibilityCulling: false,
+                visibilityStableSkip: true,
+                visibilitySkipReason: 'ua-ultra-resident-camera-only',
+                incrementalPanVisibility: false,
+                shouldSyncCss3dTransforms: false,
+                shouldRenderCss3d: false,
+                usedCss3dCameraFastPath: canRenderCss3dCamera === true,
+                uaUltraResidentCameraOnly: true,
+                shouldSyncTextOverlays: false,
+                usedPassiveOverlayCameraFastPath: false,
+                passiveOverlaySuppressed: module._suppressPassiveDomOverlayDuringZoom === true,
+                webgl: module._lastWebglRenderInfo || null,
+                sections: sectionTimes
+            };
+            updateFramePerfPeakProfile(module, module._lastFramePerfProfile, frameEnd);
+        } else if (module._lastFramePerfProfile) {
+            module._lastFramePerfProfile = null;
+        }
+
+        module._lastAnimationLoopDelayMs = 0;
+        module._animationLoopExecuting = false;
+        module._scheduleAnimationLoop(loop, 0);
+        return true;
+    }
+
     function getRenderDebugMetricsSnapshot() {
         const snapshotStart = (typeof performance !== 'undefined' && typeof performance.now === 'function')
             ? performance.now()
@@ -910,6 +1585,7 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
                 lastFrameDurationMs: 0,
                 lastFramePerfProfile: null,
                 lastFramePerfPeakProfile: null,
+                framePathStats: null,
                 updatedAt: 0,
                 visibleNodes: 0,
                 isZooming: false,
@@ -985,9 +1661,24 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
             : (flags.enablePassiveOverlayForVisibleNodes !== false
                 ? 'all-visible passive'
                 : 'selected/editing only');
-        const residentDirtyState = typeof moduleInstance.lodRenderer?.getResidentDirtyState === 'function'
+        const shouldBuildResidentDirtySnapshot =
+            flags.enableFramePerfProbe === true ||
+            flags.enableNodeFrameDebug === true;
+        const residentDirtyState = shouldBuildResidentDirtySnapshot === true &&
+            typeof moduleInstance.lodRenderer?.getResidentDirtyState === 'function'
             ? moduleInstance.lodRenderer.getResidentDirtyState(moduleInstance.camera, moduleInstance)
-            : null;
+            : (
+                moduleInstance.lodRenderer
+                    ? {
+                        dirty: moduleInstance.lodRenderer.canUseUltraResidentCameraOnlyFrame?.(moduleInstance.camera, moduleInstance) !== true,
+                        approximate: true,
+                        lodBand: currentLodBand || '',
+                        currentLodBand,
+                        hasResidentInstances: moduleInstance.lodRenderer._hasResidentLodInstances?.() === true,
+                        detailedSnapshotSkipped: true
+                    }
+                    : null
+            );
 
         const snapshotEnd = (typeof performance !== 'undefined' && typeof performance.now === 'function')
             ? performance.now()
@@ -1007,6 +1698,7 @@ const MINDMAP_CORE_BUILD_ID = '20260619-ua-immediate-camera-v629';
             lastFrameDurationMs: Number(moduleInstance._lastFrameDurationMs || 0),
             lastFramePerfProfile: moduleInstance._lastFramePerfProfile || null,
             lastFramePerfPeakProfile: moduleInstance._framePerfPeakProfile || null,
+            framePathStats: moduleInstance._framePathStats || null,
             updatedAt: Number(moduleInstance._lastFrameMetricsAt || 0),
             visibleNodes: Number(moduleInstance._visibleIds?.size || moduleInstance._prevVisibleIds?.size || 0),
             isZooming: moduleInstance.isZooming === true,
@@ -2583,6 +3275,9 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this.lodUpdateQueue = []; // Initialize lodUpdateQueue
             this.isPanning = false;
             this._currentDpr = null;
+            this._lastWebglRenderedCameraState = null;
+            this._webglCanvasMotionTransformActive = false;
+            this._lastWebglCanvasMotionTransformKey = '';
             this._lastViewportWidth = 0;
             this._lastViewportHeight = 0;
             this._lastViewportDpr = 0;
@@ -2620,6 +3315,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this._pendingViewStateSnapshot = null;
             this._pendingViewStateKey = null;
             this._lastPersistedViewStateKey = null;
+            this._viewStatePersistNeedsFreshSnapshot = false;
             this._viewStatePersistDelayMs = 650;
             this._viewStatePersistScheduledAt = 0;
             this._postLoadVisualSyncToken = 0;
@@ -2719,6 +3415,13 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this._installForceUpdateWakeHook();
             this._forceUpdateFrames = 0;
             this._forceThemeAnimationFrame = false;
+            this._webglCameraMotionDeferred = false;
+            this._themeCameraMotionDeferred = false;
+            this._css3dVisualDeferredForMotion = false;
+            this._motionGridLayer = null;
+            this._motionGridVisible = false;
+            this._motionGridHideTimer = null;
+            this._lastMotionGridKey = '';
             this._animationIdleTimerId = null;
             this._animationLoopCallback = null;
             this._animationLoopExecuting = false;
@@ -2758,6 +3461,195 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
         // ▼▼▼ [New] Node snap function - use Math.round to snap to nearest grid ▼▼▼
         snapNodeToGrid(v) { return Math.round(v / this.GRID_SIZE) * this.GRID_SIZE; }
 
+        _isMotionGridThemeEnabled() {
+            const themeName = String(this.currentThemeName || '').trim();
+            return themeName === 'SpatialGrid2D' ||
+                themeName === 'XYGrid' ||
+                themeName === 'GridPlane' ||
+                themeName === 'Space3D' ||
+                themeName === 'SpiritFlow' ||
+                themeName === 'SpinningBoxes';
+        }
+
+        _ensureMotionGridLayer() {
+            if (!this.container) {
+                return null;
+            }
+            if (this._motionGridLayer?.isConnected) {
+                return this._motionGridLayer;
+            }
+
+            const layer = document.createElement('div');
+            layer.className = 'mindcanvas-motion-grid-layer';
+            layer.setAttribute('aria-hidden', 'true');
+            layer.style.position = 'absolute';
+            layer.style.inset = `-${CAMERA_MOTION_GRID_OVERSCAN_PX}px`;
+            layer.style.zIndex = '0';
+            layer.style.pointerEvents = 'none';
+            layer.style.display = 'none';
+            layer.style.opacity = '0';
+            layer.style.backgroundRepeat = 'repeat';
+            layer.style.contain = 'strict';
+            layer.style.willChange = 'transform, opacity';
+            layer.style.transform = 'translate3d(0, 0, 0)';
+            layer.style.transition = 'none';
+
+            const cssElement = this.cssRenderer?.domElement;
+            if (cssElement?.parentNode === this.container) {
+                this.container.insertBefore(layer, cssElement);
+            } else {
+                this.container.appendChild(layer);
+            }
+
+            this._motionGridLayer = layer;
+            this._lastMotionGridKey = '';
+            this._lastMotionGridTransformKey = '';
+            return layer;
+        }
+
+        _setMotionGridVisible(visible) {
+            const layer = this._motionGridLayer;
+            if (!layer) {
+                return;
+            }
+
+            if (visible === true) {
+                if (this._motionGridHideTimer) {
+                    clearTimeout(this._motionGridHideTimer);
+                    this._motionGridHideTimer = null;
+                }
+                if (this._motionGridVisible === true) {
+                    if (layer.style.display !== 'block') {
+                        layer.style.display = 'block';
+                    }
+                    return;
+                }
+                this._motionGridVisible = true;
+                if (layer.style.display !== 'block') {
+                    layer.style.display = 'block';
+                }
+                return;
+            }
+
+            if (this._motionGridVisible !== true) {
+                return;
+            }
+
+            this._motionGridVisible = false;
+            if (layer.style.opacity !== '0') {
+                layer.style.opacity = '0';
+            }
+            if (this._motionGridHideTimer) {
+                return;
+            }
+            this._motionGridHideTimer = setTimeout(() => {
+                this._motionGridHideTimer = null;
+                if (this._motionGridVisible !== true && layer.isConnected) {
+                    layer.style.display = 'none';
+                }
+            }, CAMERA_MOTION_GRID_HIDE_DELAY_MS);
+        }
+
+        _syncMotionGridLayer(visible = true) {
+            if (visible !== true) {
+                this._setMotionGridVisible(false);
+                return false;
+            }
+
+            if (!this._isMotionGridThemeEnabled() || !this.container || !this.camera?.isPerspectiveCamera) {
+                this._setMotionGridVisible(false);
+                return false;
+            }
+
+            const layer = this._ensureMotionGridLayer();
+            if (!layer) {
+                return false;
+            }
+
+            const viewportMetrics = getCachedViewportMetrics(this);
+            const width = Math.max(1, Number(viewportMetrics.width || 0));
+            const height = Math.max(1, Number(viewportMetrics.height || 0));
+            const camera = this.camera;
+            const rawCameraZ = Math.max(1, Number(camera.position?.z || 1));
+            const isCameraNavigationFrame =
+                this.isPanning === true ||
+                this.isZooming === true ||
+                this._webglCameraMotionDeferred === true;
+            const cameraZ = isCameraNavigationFrame
+                ? Math.max(1, Math.round(rawCameraZ / CAMERA_MOTION_GRID_Z_BUCKET_WORLD) * CAMERA_MOTION_GRID_Z_BUCKET_WORLD)
+                : rawCameraZ;
+            const vfov = (Number(camera.fov || 45) * Math.PI) / 180;
+            const viewHeight = 2 * Math.tan(vfov / 2) * cameraZ;
+            const pxPerWorld = height / Math.max(1, viewHeight);
+            const worldGrid = Math.max(1, Number(this.GRID_SIZE || 10));
+            const smallStepPx = Math.max(
+                CAMERA_MOTION_GRID_MIN_STEP_PX,
+                Math.min(CAMERA_MOTION_GRID_MAX_STEP_PX, worldGrid * pxPerWorld)
+            );
+            const majorStepPx = smallStepPx * 10;
+            const cameraX = Number(camera.position?.x || 0);
+            const cameraY = Number(camera.position?.y || 0);
+            const themeName = String(this.currentThemeName || '').trim();
+            const isParticleMotionTheme =
+                themeName === 'Space3D' ||
+                themeName === 'SpiritFlow' ||
+                themeName === 'SpinningBoxes';
+            const originX = width / 2 - cameraX * pxPerWorld;
+            const originY = height / 2 + cameraY * pxPerWorld;
+            const positiveModulo = (value, size) => ((value % size) + size) % size;
+            const translateX = positiveModulo(originX + CAMERA_MOTION_GRID_OVERSCAN_PX, majorStepPx);
+            const translateY = positiveModulo(originY + CAMERA_MOTION_GRID_OVERSCAN_PX, majorStepPx);
+            const opacity = isParticleMotionTheme
+                ? 0.96
+                : (cameraZ <= 1600
+                ? 1
+                : Math.max(0.38, 1 - ((cameraZ - 1600) / 12000)));
+            const backgroundColor = themeName === 'GridPlane' || themeName === 'XYGrid'
+                ? '#e8edf3'
+                : '#e3e7ee';
+            const motionGridKey = [
+                width,
+                height,
+                themeName,
+                Math.round(cameraZ),
+                Math.round(smallStepPx * 100),
+                Math.round(majorStepPx * 100),
+                Math.round(opacity * 100)
+            ].join('|');
+
+            if (motionGridKey !== this._lastMotionGridKey) {
+                this._lastMotionGridKey = motionGridKey;
+                layer.style.backgroundColor = backgroundColor;
+                layer.style.backgroundImage = [
+                    'radial-gradient(circle at 0 0, rgba(94, 103, 115, 0.34) 1px, transparent 1.45px)',
+                    'radial-gradient(circle at 0 0, rgba(77, 86, 99, 0.52) 1.8px, transparent 2.2px)'
+                ].join(', ');
+                layer.style.backgroundSize = `${smallStepPx.toFixed(3)}px ${smallStepPx.toFixed(3)}px, ${majorStepPx.toFixed(3)}px ${majorStepPx.toFixed(3)}px`;
+                layer.style.backgroundPosition = '0 0, 0 0';
+                layer.style.opacity = opacity.toFixed(3);
+            }
+            const transformKey = `${Math.round(translateX * 100)}|${Math.round(translateY * 100)}`;
+            if (transformKey !== this._lastMotionGridTransformKey) {
+                this._lastMotionGridTransformKey = transformKey;
+                layer.style.transform = `translate3d(${translateX.toFixed(3)}px, ${translateY.toFixed(3)}px, 0)`;
+            }
+
+            this._setMotionGridVisible(opacity > 0.01);
+            return opacity > 0.01;
+        }
+
+        _syncMotionGridLayerForCameraNavigation(usedWebglCanvasCameraTransform = false) {
+            if (usedWebglCanvasCameraTransform === true ||
+                CAMERA_MOTION_GRID_FALLBACK_ENABLED !== true) {
+                if (this._motionGridVisible === true || this._motionGridLayer) {
+                    this._syncMotionGridLayer(false);
+                }
+                return false;
+            }
+
+            return this._syncMotionGridLayer(true);
+        }
+
         _installForceUpdateWakeHook() {
             if (Object.getOwnPropertyDescriptor(this, '_forceUpdateFrames')?.get) {
                 return;
@@ -3187,9 +4079,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 console.error('[mind-map-core.js] Container not found!');
                 return;
             }
-            this.container.style.display = 'block';
-            this._lastContainerWidth = this.container.clientWidth || 0;
-            this._lastContainerHeight = this.container.clientHeight || 0;
+            this.container.style.display = 'block';
+            this._lastContainerWidth = this.container.clientWidth || 0;
+            this._lastContainerHeight = this.container.clientHeight || 0;
+            this._lastViewportWidth = this._lastContainerWidth;
+            this._lastViewportHeight = this._lastContainerHeight;
+            this._lastViewportDpr = Math.max(1, Number(window.devicePixelRatio || 1));
             const THREE = globalThis.THREE;
             this.scene = new THREE.Scene();
             this.cssScene = new THREE.Scene();
@@ -3425,10 +4320,11 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const newTheme = window.MindMapThemes.getTheme(themeName);
             if (!newTheme) { console.warn(`[mind-map-core.js] Theme '${themeName}' not found.`); return; }
             if (this.currentThemeObject) {
-                const oldTheme = window.MindMapThemes.getTheme(this.currentThemeName);
-                try { oldTheme?.dispose(this.currentThemeObject); } catch { }
-                if (this.scene) this.scene.remove(this.currentThemeObject);
-            }
+                const oldTheme = window.MindMapThemes.getTheme(this.currentThemeName);
+                try { oldTheme?.dispose(this.currentThemeObject); } catch { }
+                if (this.scene) this.scene.remove(this.currentThemeObject);
+            }
+            this._syncMotionGridLayer(false);
             this.currentThemeObject = newTheme.create(this.scene, this.renderer);
             if (this.currentThemeObject) this.scene.add(this.currentThemeObject);
             this.currentThemeName = themeName;
@@ -3492,6 +4388,76 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this.renderer.setSize(width, height, false);
         }
 
+        _recordWebglRenderedCameraState() {
+            if (!this.camera) {
+                return;
+            }
+
+            const viewportMetrics = getCachedViewportMetrics(this);
+            this._lastWebglRenderedCameraState = {
+                x: Number(this.camera.position?.x || 0),
+                y: Number(this.camera.position?.y || 0),
+                z: Math.max(1, Number(this.camera.position?.z || 1)),
+                width: Math.max(1, Number(viewportMetrics.width || 1)),
+                height: Math.max(1, Number(viewportMetrics.height || 1)),
+                fov: Number(this.camera.fov || 45)
+            };
+        }
+
+        _clearWebglCanvasCameraTransform() {
+            const element = this.renderer?.domElement;
+            if (!element || this._webglCanvasMotionTransformActive !== true) {
+                return false;
+            }
+
+            element.style.transform = '';
+            element.style.transformOrigin = '';
+            element.style.willChange = '';
+            this._webglCanvasMotionTransformActive = false;
+            this._lastWebglCanvasMotionTransformKey = '';
+            return true;
+        }
+
+        _applyWebglCanvasCameraTransform() {
+            const element = this.renderer?.domElement;
+            const camera = this.camera;
+            const last = this._lastWebglRenderedCameraState;
+            if (!element || !camera || !last) {
+                return false;
+            }
+
+            const viewportMetrics = getCachedViewportMetrics(this);
+            const width = Math.max(1, Number(viewportMetrics.width || last.width || 1));
+            const height = Math.max(1, Number(viewportMetrics.height || last.height || 1));
+            const currentZ = Math.max(1, Number(camera.position?.z || 1));
+            const lastZ = Math.max(1, Number(last.z || currentZ));
+            const vfov = (Number(camera.fov || last.fov || 45) * Math.PI) / 180;
+            const viewHeight = 2 * Math.tan(vfov / 2) * currentZ;
+            const pxPerWorld = height / Math.max(1, viewHeight);
+            const scale = Math.max(0.05, Math.min(20, lastZ / currentZ));
+            const currentX = Number(camera.position?.x || 0);
+            const currentY = Number(camera.position?.y || 0);
+            const translateX = (Number(last.x || 0) - currentX) * pxPerWorld;
+            const translateY = (currentY - Number(last.y || 0)) * pxPerWorld;
+            const transformKey = [
+                Math.round(width),
+                Math.round(height),
+                Math.round(translateX * 100),
+                Math.round(translateY * 100),
+                Math.round(scale * 10000)
+            ].join('|');
+
+            if (transformKey !== this._lastWebglCanvasMotionTransformKey) {
+                this._lastWebglCanvasMotionTransformKey = transformKey;
+                element.style.transformOrigin = '50% 50%';
+                element.style.willChange = 'transform';
+                element.style.transform = `translate3d(${translateX.toFixed(3)}px, ${translateY.toFixed(3)}px, 0) scale(${scale.toFixed(5)})`;
+            }
+
+            this._webglCanvasMotionTransformActive = true;
+            return true;
+        }
+
         refreshAgentConsoleVisibilityTracking(force = false) {
             if (!force && this._agentConsoleVisibilityTrackingDirty !== true) {
                 return;
@@ -3884,8 +4850,11 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 viewHeight = 2 * Math.tan(vfov / 2) * Math.max(1, cameraZ);
                 viewWidth = viewHeight * Math.max(0.1, Number(camera.aspect || 1));
 
-                const worldPerPxX = viewWidth / Math.max(1, this.container.clientWidth);
-                const worldPerPxY = viewHeight / Math.max(1, this.container.clientHeight);
+                const viewportMetrics = getCachedViewportMetrics(this);
+                const viewportWidth = Math.max(1, Number(viewportMetrics.width || 1));
+                const viewportHeight = Math.max(1, Number(viewportMetrics.height || 1));
+                const worldPerPxX = viewWidth / viewportWidth;
+                const worldPerPxY = viewHeight / viewportHeight;
                 const rawMarginWorld = cullingMarginPx * Math.max(worldPerPxX, worldPerPxY);
                 const cellSize = this.GRID_CELL_SIZE || 500;
                 marginWorld = Math.min(rawMarginWorld, cellSize * maxMarginCells);
@@ -4465,7 +5434,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
                 if (this.isZooming && !isCameraMoving && timeSinceLastInput > ZOOM_END_DELAY_MS) {
                     this.isZooming = false;
-                    document.body.classList.remove('is-zooming');
+                    document.body?.classList?.remove?.('is-zooming');
                     this.cssRenderer?.domElement?.classList?.remove?.('is-zooming');
                     if (FRAME_PERF_DEBUG) {
                         console.log(`[Perf] Zoom ended (${timeSinceLastInput.toFixed(0)}ms since last input)`);
@@ -4476,10 +5445,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         ? requestIdleCallback : (cb) => setTimeout(cb, 0);
                     scheduleWillChangeOff(() => {
                         // 패닝/줌이 다시 시작됐으면 건너뜀
-                        if (!moduleRef.isZooming && !moduleRef.isPanning) {
-                            if (window.MindMapCss3DManager?.setWillChange) {
-                                window.MindMapCss3DManager.setWillChange(false, moduleRef);
-                            }
+                        if (!moduleRef.isZooming &&
+                            !moduleRef.isPanning &&
+                            moduleRef.renderDebugFlags?.enableCss3dWillChange === true) {
+                            if (window.MindMapCss3DManager?.setWillChange) {
+                                window.MindMapCss3DManager.setWillChange(false, moduleRef);
+                            }
                         }
                     });
                     // ▲▲▲ [Fix] ▲▲▲
@@ -4488,8 +5459,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 _profileSection('state');
 
                 if (isCameraMoving !== this.prevIsCameraMoving) {
-                    // Update will-change state
-                    if (!this.isZooming && !this.isPanning && window.MindMapCss3DManager?.setWillChange) {
+                    const shouldSyncCss3dWillChangeForCameraMotion =
+                        this.renderDebugFlags?.enableCss3dWillChange === true;
+                    if (!this.isZooming &&
+                        !this.isPanning &&
+                        shouldSyncCss3dWillChangeForCameraMotion &&
+                        window.MindMapCss3DManager?.setWillChange) {
                         window.MindMapCss3DManager.setWillChange(isCameraMoving, this);
                     }
 
@@ -4540,6 +5515,19 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this._overlayDirty = true;
                     }
 
+                    if (this._webglCameraMotionDeferred === true ||
+                        this._themeCameraMotionDeferred === true ||
+                        this._css3dVisualDeferredForMotion === true) {
+                        this._forceUpdateFrames = Math.max(this._forceUpdateFrames || 0, 2);
+                        this._forceThemeAnimationFrame = true;
+                        if (this._css3dVisualDeferredForMotion === true) {
+                            this._css3dVisualChangedSinceLastRender = true;
+                        }
+                        this._webglCameraMotionDeferred = false;
+                        this._themeCameraMotionDeferred = false;
+                        this._css3dVisualDeferredForMotion = false;
+                    }
+
                     if (this.lodRenderer?.hasPendingLineDetailRestore?.(this.camera, this) === true) {
                         this._forceUpdateFrames = Math.max(this._forceUpdateFrames || 0, 6);
                     }
@@ -4567,8 +5555,51 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 // 3. Unified Visibility & LOD Pass (One Loop to Rule Them All)
                 // ----------------------------------------------------------------
                 this.frameCount = (this.frameCount || 0) + 1;
-                const hasPendingNearCssWarmup = this.useLODRendering &&
-                    this.lodRenderer?.hasPendingNearCssWarmup?.(this) === true;
+                if (tryRunUltraEarlyCameraOnlyFrame(
+                    this,
+                    loop,
+                    frameStart,
+                    isCameraMoving,
+                    shouldCaptureFramePerf,
+                    _frameProfTimes,
+                    _profileSection
+                ) === true) {
+                    return;
+                }
+                if (tryRunUltraEarlyResidentCameraOnlyFrame(
+                    this,
+                    loop,
+                    frameStart,
+                    isCameraMoving,
+                    shouldCaptureFramePerf,
+                    _frameProfTimes,
+                    _profileSection
+                ) === true) {
+                    return;
+                }
+
+                const warmupProbeForceUpdateFrames = Math.max(0, Number(this._forceUpdateFrames || 0));
+                const warmupProbeCameraNavigationForceFrames = Math.max(0, Number(this._cameraNavigationForceFrames || 0));
+                const warmupProbePanLiveRefreshForceFrames = Math.max(0, Number(this._panLiveRefreshForceFrames || 0));
+                const warmupProbeCameraWakeFrames = Math.max(
+                    warmupProbeCameraNavigationForceFrames,
+                    warmupProbePanLiveRefreshForceFrames
+                );
+                const shouldDeferMotionWarmupAndResidentChecks =
+                    (this.isPanning === true || this.isZooming === true || isCameraMoving === true) &&
+                    this.isDraggingNode !== true &&
+                    this.isDraggingMultipleNodes !== true &&
+                    this.isResizing !== true &&
+                    this.isWindowResizing !== true &&
+                    this.isLoading !== true &&
+                    (
+                        warmupProbeForceUpdateFrames <= 0 ||
+                        warmupProbeCameraWakeFrames >= warmupProbeForceUpdateFrames
+                    );
+                const hasPendingNearCssWarmup = shouldDeferMotionWarmupAndResidentChecks === true
+                    ? false
+                    : this.useLODRendering &&
+                        this.lodRenderer?.hasPendingNearCssWarmup?.(this) === true;
                 const isResidentMidFarLodFrame = this.useLODRendering &&
                     this.lodRenderer?.usesResidentMidFarInstances?.(this.camera) === true;
                 const isFullResMode = this.lodRenderer?.isInLODMode !== true;
@@ -4622,9 +5653,15 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     hasForcedUpdate &&
                     hasOnlyCameraNavigationForcedUpdate !== true;
                 const isLodModeActive = this.lodRenderer?.isInLODMode === true;
+                if (shouldDeferMotionWarmupAndResidentChecks === true && isResidentMidFarLodFrame === true) {
+                    this._wasLodMotionFrozenLastFrame = true;
+                    this._preserveVisibleSetThisFrame = true;
+                }
                 const residentDirty = isResidentMidFarLodFrame &&
+                    shouldDeferMotionWarmupAndResidentChecks !== true &&
                     this.lodRenderer?.hasResidentDirtyWork?.(this.camera, this) === true;
                 const residentBandChanging = isResidentMidFarLodFrame &&
+                    shouldDeferMotionWarmupAndResidentChecks !== true &&
                     this.lodRenderer?.willLodBandChange?.(this.camera) === true;
                 let canDeferResidentDirtyIdleFrame = false;
                 if (isResidentMidFarLodFrame &&
@@ -4698,31 +5735,41 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 }
                 const isInteractiveFrame = this.isZooming || this.isPanning || isCameraMoving || isNodeInteracting || !!this.isWindowResizing;
                 const useTextOverlayV2 = !isBoardLoading && this.useTextOverlayV2 === true && !!window.MindMapTextOverlayV2;
+                const isPassiveDomOverlayRuntimeEnabled =
+                    useTextOverlayV2 &&
+                    window.MindMapTextOverlayV2?.isPassiveDomOverlayEnabled?.() === true;
                 const renderDebugFlags = activeRenderDebugFlags;
                 const isCss3dEnabled = !isBoardLoading && renderDebugFlags.enableCss3d !== false;
 
-                const hasKnownTextOverlayFocus = !!(
+                const hasSelectableTextOverlayFocus = !!(
                     String(this._textOverlayV2State?.selectionNodeId || '').trim() ||
+                    String(this._selectableTextOverlayNodeId || '').trim()
+                );
+                const hasEditingTextOverlayFocus = !!(
                     String(this._textOverlayV2State?.editing?.nodeId || '').trim() ||
-                    String(this._selectableTextOverlayNodeId || '').trim() ||
                     String(this._editingOverlayState?.nodeId || '').trim()
                 );
-                const hasPendingCss3dTransformWork = !!(
+                const hasPendingCss3dStructuralTransformWork = !!(
                     (this._cssTransformDirtyIds?.size || 0) > 0 ||
-                    this._cssParentRepairNeeded === true ||
+                    this._cssParentRepairNeeded === true
+                );
+                const hasPendingCss3dVisualWork = !!(
                     this._css3dVisualChangedThisFrame === true ||
                     this._css3dVisualChangedSinceLastRender === true
                 );
-                const canUseUaImmediateCameraOnlyFrame = !!(
+                const canUseUaImmediateCameraOnlyFrame = CAMERA_MOTION_VISUAL_ONLY_FAST_PATH_ENABLED === true && !!(
                     shouldPreferCameraOnlyMotionPipeline === true &&
                     isCss3dEnabled === true &&
                     !!this.cssRenderer &&
                     typeof this.cssRenderer.renderCamera === 'function' &&
+                    !!this.renderer &&
+                    !!this.scene &&
+                    !!this.camera &&
                     isLodModeActive !== true &&
                     isCameraMoving === true &&
                     this.isSelecting !== true &&
-                    !hasKnownTextOverlayFocus &&
-                    !hasPendingCss3dTransformWork &&
+                    !hasEditingTextOverlayFocus &&
+                    !hasPendingCss3dStructuralTransformWork &&
                     !isBoardLoading
                 );
                 if (canUseUaImmediateCameraOnlyFrame) {
@@ -4731,50 +5778,119 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     this._wasLodMotionFrozenLastFrame = false;
                     this._fullResVisibilityReconcilePending = true;
                     this._preserveVisibleSetThisFrame = true;
-                    this._lastVisibilityCullingSkipReason = 'ua-immediate-camera-only';
-                    if (this._businessAutomationEdgeVisualLayer?.isConnected ||
-                        this._businessAutomationEdgeLayer?.isConnected) {
-                        this._businessAutomationEdgesDeferredForMotion = true;
-                    }
+                    this._lastVisibilityCullingSkipReason = 'ua-visual-only-motion';
                     if (this._overlayDirty === true) {
                         this._deferPassiveOverlayRefresh = true;
                     }
+                    if (hasSelectableTextOverlayFocus) {
+                        this._deferPassiveOverlayRefresh = true;
+                    }
+                    if (hasPendingCss3dVisualWork) {
+                        this._css3dVisualDeferredForMotion = true;
+                    }
 
-                    const approxVisibleNodeCountImmediate = Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0);
-                    const totalNodeCountImmediate = Number(this.nodeObjectsById?.size || 0);
-                    syncMindCanvasPerfClasses({
-                        moving: true,
-                        dense:
-                            approxVisibleNodeCountImmediate >= DENSE_VISIBLE_NODE_THRESHOLD ||
-                            totalNodeCountImmediate >= DENSE_TOTAL_NODE_THRESHOLD
-                    });
+                    const needsImmediatePerfClassSync = shouldSyncMindCanvasPerfClasses();
+                    const approxVisibleNodeCountImmediate =
+                        needsImmediatePerfClassSync || shouldCaptureFramePerf
+                            ? Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0)
+                            : 0;
+                    if (needsImmediatePerfClassSync) {
+                        const totalNodeCountImmediate = Number(this.nodeObjectsById?.size || 0);
+                        syncMindCanvasPerfClasses({
+                            moving: true,
+                            dense:
+                                approxVisibleNodeCountImmediate >= DENSE_VISIBLE_NODE_THRESHOLD ||
+                                totalNodeCountImmediate >= DENSE_TOTAL_NODE_THRESHOLD
+                        });
+                    }
 
-                    if ((this.frameCount % CAMERA_MOTION_WEBGL_FRAME_INTERVAL) === 0) {
-                        updateCursorDomElement(this);
-                        if (renderDebugFlags.enableWebglRender !== false && this.renderer && this.scene && this.camera) {
+                    updateCursorDomElement(this);
+                    const canReuseWebglCanvasForImmediateMotion = !!(
+                        canUseWebglCanvasTransformForCameraMotion(this) === true &&
+                        renderDebugFlags.enableWebglRender !== false &&
+                        this._lastWebglRenderedCameraState &&
+                        this.renderer?.domElement
+                    );
+                    if (canReuseWebglCanvasForImmediateMotion === true) {
+                        deferContinuousThemeForCameraMotion(this);
+                    }
+                    if (!canReuseWebglCanvasForImmediateMotion &&
+                        renderDebugFlags.enableThemeAnimation !== false &&
+                        this.currentThemeObject &&
+                        typeof this.currentThemeObject.animate === 'function') {
+                        const themeRunner = window.MindMapThemes?.runAnimationIfNeeded;
+                        if (typeof themeRunner === 'function') {
+                            themeRunner(this.currentThemeName, this.currentThemeObject, this.camera, {
+                                force: this._forceThemeAnimationFrame === true,
+                                isCameraMoving: true,
+                                isPanning: this.isPanning === true,
+                                isZooming: this.isZooming === true,
+                                isResizing: this.isWindowResizing === true,
+                                isInteractiveFrame: true
+                            });
+                        } else {
+                            this.currentThemeObject.animate(this.camera);
+                        }
+                        this._forceThemeAnimationFrame = false;
+                    }
+                    let usedWebglCanvasCameraTransformImmediate = false;
+                    if (renderDebugFlags.enableWebglRender !== false) {
+                        if (canReuseWebglCanvasForImmediateMotion === true &&
+                            this._applyWebglCanvasCameraTransform() === true) {
+                            usedWebglCanvasCameraTransformImmediate = true;
+                            this._webglCameraMotionDeferred = true;
+                            this._lastWebglRenderInfo = {
+                                calls: 0,
+                                triangles: 0,
+                                points: 0,
+                                lines: 0,
+                                skipped: true,
+                                webglCanvasCameraTransform: true,
+                                uaVisualOnlyMotion: true
+                            };
+                        } else {
+                            this._clearWebglCanvasCameraTransform();
                             this.renderer.render(this.scene, this.camera);
+                            this._recordWebglRenderedCameraState();
                             const renderInfo = this.renderer?.info?.render || null;
                             this._lastWebglRenderInfo = renderInfo ? {
                                 calls: Number(renderInfo.calls || 0),
                                 triangles: Number(renderInfo.triangles || 0),
                                 points: Number(renderInfo.points || 0),
                                 lines: Number(renderInfo.lines || 0),
-                                uaImmediateCameraOnly: true
+                                uaVisualOnlyMotion: true,
+                                webglCanvasCameraBootstrap: true
                             } : null;
                         }
-                    } else if (renderDebugFlags.enableWebglRender !== false) {
-                        this._lastWebglRenderInfo = {
-                            calls: 0,
-                            triangles: 0,
-                            points: 0,
-                            lines: 0,
-                            skipped: true,
-                            uaImmediateCameraOnly: true
-                        };
                     }
+                    this._syncMotionGridLayerForCameraNavigation(usedWebglCanvasCameraTransformImmediate);
 
                     this.cssRenderer.renderCamera(this.camera);
-                    _profileSection('uaImmediateCameraOnly');
+                    const shouldSyncPassiveOverlayTransformDuringMotion =
+                        window.MindMapTextOverlayV2?.isPassiveDomOverlayEnabled?.() === true &&
+                        this.useTextOverlayV2 === true &&
+                        this.renderDebugFlags?.enableDomOverlay !== false;
+                    if (shouldSyncPassiveOverlayTransformDuringMotion &&
+                        window.MindMapTextOverlayV2?.syncPassiveViewTransform) {
+                        window.MindMapTextOverlayV2.syncPassiveViewTransform(this);
+                    }
+                    if ((this._businessAutomationEdgeVisualLayer?.isConnected ||
+                        this._businessAutomationEdgeLayer?.isConnected) &&
+                        window.MindMapCss3DManager?.renderBusinessAutomationEdges) {
+                        const hasBusinessAutomationConnectionDraft =
+                            window.MindMapCss3DManager?.hasBusinessAutomationConnectionDraft?.() === true;
+                        const transformedBusinessAutomationEdges =
+                            window.MindMapCss3DManager.syncBusinessAutomationEdgesForCameraMotion?.(this) === true;
+                        if (transformedBusinessAutomationEdges) {
+                            this._businessAutomationEdgesDeferredForMotion = true;
+                        } else if (hasBusinessAutomationConnectionDraft) {
+                            window.MindMapCss3DManager.renderBusinessAutomationEdges(this);
+                            this._businessAutomationEdgesDeferredForMotion = false;
+                        } else {
+                            this._businessAutomationEdgesDeferredForMotion = true;
+                        }
+                    }
+                    _profileSection('uaVisualOnlyMotion');
 
                     const frameEnd = performance.now();
                     const frameDuration = frameEnd - frameStart;
@@ -4803,22 +5919,22 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                             residentMidFarStable: false,
                             residentDirty: false,
                             residentBandChanging: false,
-                            viewSyncMode: 'ua-immediate-camera-only',
+                            viewSyncMode: 'ua-visual-only-motion',
                             lodUpdateCalled: false,
                             lodUpdateSkipped: true,
-                            lodUpdateSkipReason: 'ua-immediate-camera-only',
+                            lodUpdateSkipReason: 'ua-visual-only-motion',
                             lodSkipReason: '',
                             lodDirtyReason: '',
                             lodDirtyState: null,
                             viewSyncBreakdown: null,
                             shouldRunVisibilityCulling: false,
                             visibilityStableSkip: true,
-                            visibilitySkipReason: 'ua-immediate-camera-only',
+                            visibilitySkipReason: 'ua-visual-only-motion',
                             incrementalPanVisibility: false,
                             shouldSyncCss3dTransforms: false,
                             shouldRenderCss3d: false,
                             usedCss3dCameraFastPath: true,
-                            uaImmediateCameraOnly: true,
+                            uaVisualOnlyMotion: true,
                             shouldSyncTextOverlays: false,
                             usedPassiveOverlayCameraFastPath: false,
                             passiveOverlaySuppressed: this._suppressPassiveDomOverlayDuringZoom === true,
@@ -4841,24 +5957,388 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 const isLodUpdateEnabled = renderDebugFlags.enableLodUpdate !== false;
                 const isWebglRenderEnabled = !isBoardLoading && renderDebugFlags.enableWebglRender !== false;
                 const isThemeAnimationEnabled = !isBoardLoading && renderDebugFlags.enableThemeAnimation !== false;
-                const themeAnimationMode =
-                    window.MindMapThemes?.getAnimationMode?.(this.currentThemeName, this.currentThemeObject) ||
-                    'none';
-                const isContinuousTheme = themeAnimationMode === 'continuous';
                 const isCameraNavigationOnlyInteractiveFrame =
                     (this.isPanning === true || this.isZooming === true || isCameraMoving === true) &&
                     !isNodeInteracting &&
                     !this.isWindowResizing &&
                     !hasNonCameraNavigationForcedUpdate;
+                const canUseUaStationaryCameraNavigationAnyModeFrame = CAMERA_MOTION_VISUAL_ONLY_FAST_PATH_ENABLED === true && !!(
+                    isCameraNavigationOnlyInteractiveFrame === true &&
+                    isCameraMoving !== true &&
+                    (this.isPanning === true || this.isZooming === true) &&
+                    shouldUpdate !== true &&
+                    this.isSelecting !== true &&
+                    !hasEditingTextOverlayFocus &&
+                    !hasPendingCss3dStructuralTransformWork &&
+                    !hasPendingCss3dVisualWork &&
+                    !hasPendingNearCssWarmup &&
+                    !isBoardLoading &&
+                    this.isWindowResizing !== true &&
+                    (isWebglRenderEnabled !== true || !!this._lastWebglRenderedCameraState)
+                );
+                if (canUseUaStationaryCameraNavigationAnyModeFrame) {
+                    this._preserveVisibleSetThisFrame = true;
+                    this._lastVisibilityCullingSkipReason = 'ua-stationary-visual-motion';
+                    if (this._overlayDirty === true || hasSelectableTextOverlayFocus) {
+                        this._deferPassiveOverlayRefresh = true;
+                    }
+
+                    updateCursorDomElement(this);
+                    const canReuseWebglCanvasForStationaryMotion = !!(
+                        canUseWebglCanvasTransformForCameraMotion(this) === true &&
+                        isWebglRenderEnabled &&
+                        this._lastWebglRenderedCameraState &&
+                        this.renderer?.domElement
+                    );
+                    if (canReuseWebglCanvasForStationaryMotion === true) {
+                        deferContinuousThemeForCameraMotion(this);
+                    }
+                    if (!canReuseWebglCanvasForStationaryMotion &&
+                        renderDebugFlags.enableThemeAnimation !== false &&
+                        this.currentThemeObject &&
+                        typeof this.currentThemeObject.animate === 'function') {
+                        const themeRunner = window.MindMapThemes?.runAnimationIfNeeded;
+                        if (typeof themeRunner === 'function') {
+                            themeRunner(this.currentThemeName, this.currentThemeObject, this.camera, {
+                                force: this._forceThemeAnimationFrame === true,
+                                isCameraMoving: false,
+                                isPanning: this.isPanning === true,
+                                isZooming: this.isZooming === true,
+                                isResizing: this.isWindowResizing === true,
+                                isInteractiveFrame: true
+                            });
+                        } else {
+                            this.currentThemeObject.animate(this.camera);
+                        }
+                        this._forceThemeAnimationFrame = false;
+                    }
+                    let usedWebglCanvasCameraTransformStationary = false;
+                    if (isWebglRenderEnabled && this.renderer && this.scene && this.camera) {
+                        if (canReuseWebglCanvasForStationaryMotion === true &&
+                            this._applyWebglCanvasCameraTransform() === true) {
+                            usedWebglCanvasCameraTransformStationary = true;
+                            this._webglCameraMotionDeferred = true;
+                            this._lastWebglRenderInfo = {
+                                calls: 0,
+                                triangles: 0,
+                                points: 0,
+                                lines: 0,
+                                skipped: true,
+                                webglCanvasCameraTransform: true,
+                                uaStationaryVisualMotion: true
+                            };
+                        } else {
+                            this._clearWebglCanvasCameraTransform();
+                            this.renderer.render(this.scene, this.camera);
+                            this._recordWebglRenderedCameraState();
+                            const renderInfo = this.renderer?.info?.render || null;
+                            this._lastWebglRenderInfo = renderInfo ? {
+                                calls: Number(renderInfo.calls || 0),
+                                triangles: Number(renderInfo.triangles || 0),
+                                points: Number(renderInfo.points || 0),
+                                lines: Number(renderInfo.lines || 0),
+                                uaStationaryVisualMotion: true,
+                                webglCanvasCameraBootstrap: true
+                            } : null;
+                        }
+                    }
+                    this._syncMotionGridLayerForCameraNavigation(usedWebglCanvasCameraTransformStationary);
+                    if (this.cssRenderer && typeof this.cssRenderer.renderCamera === 'function') {
+                        this.cssRenderer.renderCamera(this.camera);
+                    }
+                    if ((this._businessAutomationEdgeVisualLayer?.isConnected ||
+                        this._businessAutomationEdgeLayer?.isConnected) &&
+                        window.MindMapCss3DManager?.renderBusinessAutomationEdges) {
+                        const hasBusinessAutomationConnectionDraft =
+                            window.MindMapCss3DManager?.hasBusinessAutomationConnectionDraft?.() === true;
+                        const transformedBusinessAutomationEdges =
+                            window.MindMapCss3DManager.syncBusinessAutomationEdgesForCameraMotion?.(this) === true;
+                        if (transformedBusinessAutomationEdges) {
+                            this._businessAutomationEdgesDeferredForMotion = true;
+                        } else if (hasBusinessAutomationConnectionDraft) {
+                            window.MindMapCss3DManager.renderBusinessAutomationEdges(this);
+                            this._businessAutomationEdgesDeferredForMotion = false;
+                        } else {
+                            this._businessAutomationEdgesDeferredForMotion = true;
+                        }
+                    }
+
+                    _profileSection('uaStationaryVisualMotion');
+
+                    const frameEnd = performance.now();
+                    const frameDuration = frameEnd - frameStart;
+                    this._lastFrameDurationMs = frameDuration;
+                    this._lastFrameMetricsAt = frameEnd;
+                    if (shouldCaptureFramePerf) {
+                        const sectionTimes = {};
+                        Object.entries(_frameProfTimes)
+                            .filter(([key, value]) => key !== 'visibleNodes' && typeof value === 'number')
+                            .forEach(([key, value]) => {
+                                sectionTimes[key] = Number(value.toFixed(2));
+                            });
+                        this._lastFramePerfProfile = {
+                            durationMs: Number(frameDuration.toFixed(2)),
+                            update: false,
+                            cameraZ: Number((this.camera?.position?.z || 0).toFixed(2)),
+                            isZooming: this.isZooming === true,
+                            isPanning: this.isPanning === true,
+                            isCameraMoving: false,
+                            isInLodMode: this.lodRenderer?.isInLODMode === true,
+                            lodBand: this.lodRenderer?._currentLodBand || null,
+                            visibleNodes: Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0),
+                            freezeVisibility: true,
+                            freezeLod: true,
+                            freezeFullRes: true,
+                            residentMidFarStable: residentMidFarStable === true,
+                            residentDirty: residentDirty === true,
+                            residentBandChanging: residentBandChanging === true,
+                            viewSyncMode: 'ua-stationary-visual-motion',
+                            lodUpdateCalled: false,
+                            lodUpdateSkipped: true,
+                            lodUpdateSkipReason: 'ua-stationary-visual-motion',
+                            lodSkipReason: '',
+                            lodDirtyReason: '',
+                            lodDirtyState: null,
+                            viewSyncBreakdown: null,
+                            shouldRunVisibilityCulling: false,
+                            visibilityStableSkip: true,
+                            visibilitySkipReason: 'ua-stationary-visual-motion',
+                            incrementalPanVisibility: false,
+                            shouldSyncCss3dTransforms: false,
+                            shouldRenderCss3d: false,
+                            usedCss3dCameraFastPath: false,
+                            uaStationaryVisualMotion: true,
+                            shouldSyncTextOverlays: false,
+                            usedPassiveOverlayCameraFastPath: false,
+                            passiveOverlaySuppressed: this._suppressPassiveDomOverlayDuringZoom === true,
+                            webgl: this._lastWebglRenderInfo || null,
+                            sections: sectionTimes
+                        };
+                        updateFramePerfPeakProfile(this, this._lastFramePerfProfile, frameEnd);
+                    } else if (this._lastFramePerfProfile) {
+                        this._lastFramePerfProfile = null;
+                    }
+
+                    this._lastAnimationLoopDelayMs = 0;
+                    this._animationLoopExecuting = false;
+                    this._scheduleAnimationLoop(loop, 0);
+                    return;
+                }
+                const shouldRenderCss3dInLodForUaResidentCameraOnly = !!(
+                    isCss3dEnabled === true &&
+                    !!this.cssRenderer &&
+                    typeof this.cssRenderer.renderCamera === 'function' &&
+                    this.lodRenderer?.hasCss3dLodCandidates?.() === true
+                );
+                const canUseUaResidentCameraOnlyFrame = CAMERA_MOTION_VISUAL_ONLY_FAST_PATH_ENABLED === true && !!(
+                    shouldPreferCameraOnlyMotionPipeline === true &&
+                    isCameraNavigationOnlyInteractiveFrame === true &&
+                    isResidentMidFarLodFrame === true &&
+                    residentMidFarStable === true &&
+                    shouldUpdate !== true &&
+                    isCameraMoving === true &&
+                    this.isSelecting !== true &&
+                    !hasEditingTextOverlayFocus &&
+                    !hasPendingCss3dStructuralTransformWork &&
+                    !isBoardLoading &&
+                    this.isWindowResizing !== true &&
+                    (
+                        isWebglRenderEnabled === true ||
+                        shouldRenderCss3dInLodForUaResidentCameraOnly === true
+                    )
+                );
+                if (canUseUaResidentCameraOnlyFrame) {
+                    this._fullResMotionFrozen = false;
+                    this._wasViewStateMotionFrozenLastFrame = false;
+                    this._wasLodMotionFrozenLastFrame = true;
+                    this._preserveVisibleSetThisFrame = true;
+                    this._lastVisibilityCullingSkipReason = 'ua-resident-visual-only-motion';
+                    if (this._overlayDirty === true || hasSelectableTextOverlayFocus) {
+                        this._deferPassiveOverlayRefresh = true;
+                    }
+                    if (hasPendingCss3dVisualWork) {
+                        this._css3dVisualDeferredForMotion = true;
+                    }
+
+                    const needsResidentPerfClassSync = shouldSyncMindCanvasPerfClasses();
+                    const approxVisibleNodeCountResident =
+                        needsResidentPerfClassSync || shouldCaptureFramePerf
+                            ? Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0)
+                            : 0;
+                    if (needsResidentPerfClassSync) {
+                        const totalNodeCountResident = Number(this.nodeObjectsById?.size || 0);
+                        syncMindCanvasPerfClasses({
+                            moving: true,
+                            dense:
+                                approxVisibleNodeCountResident >= DENSE_VISIBLE_NODE_THRESHOLD ||
+                                totalNodeCountResident >= DENSE_TOTAL_NODE_THRESHOLD
+                        });
+                    }
+
+                    updateCursorDomElement(this);
+                    const canReuseWebglCanvasForResidentMotion = !!(
+                        canUseWebglCanvasTransformForCameraMotion(this) === true &&
+                        isWebglRenderEnabled === true &&
+                        this._lastWebglRenderedCameraState &&
+                        this.renderer?.domElement
+                    );
+                    if (canReuseWebglCanvasForResidentMotion === true) {
+                        deferContinuousThemeForCameraMotion(this);
+                    }
+                    if (!canReuseWebglCanvasForResidentMotion &&
+                        renderDebugFlags.enableThemeAnimation !== false &&
+                        this.currentThemeObject &&
+                        typeof this.currentThemeObject.animate === 'function') {
+                        const themeRunner = window.MindMapThemes?.runAnimationIfNeeded;
+                        if (typeof themeRunner === 'function') {
+                            themeRunner(this.currentThemeName, this.currentThemeObject, this.camera, {
+                                force: this._forceThemeAnimationFrame === true,
+                                isCameraMoving: true,
+                                isPanning: this.isPanning === true,
+                                isZooming: this.isZooming === true,
+                                isResizing: this.isWindowResizing === true,
+                                isInteractiveFrame: true
+                            });
+                        } else {
+                            this.currentThemeObject.animate(this.camera);
+                        }
+                        this._forceThemeAnimationFrame = false;
+                    }
+                    if (isWebglRenderEnabled === true) {
+                        if (this.renderer && this.scene && this.camera) {
+                            if (canReuseWebglCanvasForResidentMotion === true &&
+                                this._applyWebglCanvasCameraTransform() === true) {
+                                this._webglCameraMotionDeferred = true;
+                                this._lastWebglRenderInfo = {
+                                    calls: 0,
+                                    triangles: 0,
+                                    points: 0,
+                                    lines: 0,
+                                    skipped: true,
+                                    webglCanvasCameraTransform: true,
+                                    uaResidentVisualOnlyMotion: true
+                                };
+                            } else {
+                                this._clearWebglCanvasCameraTransform();
+                                this.renderer.render(this.scene, this.camera);
+                                this._recordWebglRenderedCameraState();
+                                const renderInfo = this.renderer?.info?.render || null;
+                                this._lastWebglRenderInfo = renderInfo ? {
+                                    calls: Number(renderInfo.calls || 0),
+                                    triangles: Number(renderInfo.triangles || 0),
+                                    points: Number(renderInfo.points || 0),
+                                    lines: Number(renderInfo.lines || 0),
+                                    uaResidentVisualOnlyMotion: true,
+                                    webglCanvasCameraBootstrap: true
+                                } : null;
+                            }
+                        }
+                    }
+
+                    if (shouldRenderCss3dInLodForUaResidentCameraOnly === true) {
+                        this.cssRenderer.renderCamera(this.camera);
+                    }
+                    if ((this._businessAutomationEdgeVisualLayer?.isConnected ||
+                        this._businessAutomationEdgeLayer?.isConnected) &&
+                        window.MindMapCss3DManager?.renderBusinessAutomationEdges) {
+                        const hasBusinessAutomationConnectionDraft =
+                            window.MindMapCss3DManager?.hasBusinessAutomationConnectionDraft?.() === true;
+                        const transformedBusinessAutomationEdges =
+                            window.MindMapCss3DManager.syncBusinessAutomationEdgesForCameraMotion?.(this) === true;
+                        if (transformedBusinessAutomationEdges) {
+                            this._businessAutomationEdgesDeferredForMotion = true;
+                        } else if (hasBusinessAutomationConnectionDraft) {
+                            window.MindMapCss3DManager.renderBusinessAutomationEdges(this);
+                            this._businessAutomationEdgesDeferredForMotion = false;
+                        } else {
+                            this._businessAutomationEdgesDeferredForMotion = true;
+                        }
+                    }
+                    _profileSection('uaResidentVisualOnlyMotion');
+
+                    const frameEnd = performance.now();
+                    const frameDuration = frameEnd - frameStart;
+                    this._lastFrameDurationMs = frameDuration;
+                    this._lastFrameMetricsAt = frameEnd;
+                    if (shouldCaptureFramePerf) {
+                        const sectionTimes = {};
+                        Object.entries(_frameProfTimes)
+                            .filter(([key, value]) => key !== 'visibleNodes' && typeof value === 'number')
+                            .forEach(([key, value]) => {
+                                sectionTimes[key] = Number(value.toFixed(2));
+                            });
+                        this._lastFramePerfProfile = {
+                            durationMs: Number(frameDuration.toFixed(2)),
+                            update: false,
+                            cameraZ: Number((this.camera?.position?.z || 0).toFixed(2)),
+                            isZooming: this.isZooming === true,
+                            isPanning: this.isPanning === true,
+                            isCameraMoving: true,
+                            isInLodMode: true,
+                            lodBand: this.lodRenderer?._currentLodBand || null,
+                            visibleNodes: approxVisibleNodeCountResident,
+                            freezeVisibility: true,
+                            freezeLod: true,
+                            freezeFullRes: false,
+                            residentMidFarStable: true,
+                            residentDirty: residentDirty === true,
+                            residentBandChanging: false,
+                            viewSyncMode: 'ua-resident-visual-only-motion',
+                            lodUpdateCalled: false,
+                            lodUpdateSkipped: true,
+                            lodUpdateSkipReason: 'ua-resident-visual-only-motion',
+                            lodSkipReason: '',
+                            lodDirtyReason: '',
+                            lodDirtyState: null,
+                            viewSyncBreakdown: null,
+                            shouldRunVisibilityCulling: false,
+                            visibilityStableSkip: true,
+                            visibilitySkipReason: 'ua-resident-visual-only-motion',
+                            incrementalPanVisibility: false,
+                            shouldSyncCss3dTransforms: false,
+                            shouldRenderCss3d: false,
+                            usedCss3dCameraFastPath: shouldRenderCss3dInLodForUaResidentCameraOnly === true,
+                            uaResidentVisualOnlyMotion: true,
+                            shouldSyncTextOverlays: false,
+                            usedPassiveOverlayCameraFastPath: false,
+                            passiveOverlaySuppressed: this._suppressPassiveDomOverlayDuringZoom === true,
+                            webgl: this._lastWebglRenderInfo || null,
+                            sections: sectionTimes
+                        };
+                        updateFramePerfPeakProfile(this, this._lastFramePerfProfile, frameEnd);
+                    } else if (this._lastFramePerfProfile) {
+                        this._lastFramePerfProfile = null;
+                    }
+
+                    this._lastAnimationLoopDelayMs = 0;
+                    this._animationLoopExecuting = false;
+                    this._scheduleAnimationLoop(loop, 0);
+                    return;
+                }
+                const themeAnimationMode =
+                    window.MindMapThemes?.getAnimationMode?.(this.currentThemeName, this.currentThemeObject) ||
+                    'none';
+                const isContinuousTheme = themeAnimationMode === 'continuous';
+                const shouldPauseThemeForCameraNavigation =
+                    isContinuousTheme === true &&
+                    isCameraNavigationOnlyInteractiveFrame === true &&
+                    this._forceThemeAnimationFrame !== true &&
+                    canUseWebglCanvasTransformForCameraMotion(this) === true;
                 const allowContinuousThemeAnimationThisFrame =
-                    isContinuousTheme !== true ||
-                    (isInteractiveFrame === true && !isCameraNavigationOnlyInteractiveFrame) ||
-                    (shouldUpdate === true && !isCameraNavigationOnlyInteractiveFrame) ||
-                    hasNonCameraNavigationForcedUpdate === true ||
-                    isBoardLoading === true ||
-                    shouldUseAnimation60Fps === true ||
-                    shouldUseAnimationLowFpsFrame === true ||
-                    this._forceThemeAnimationFrame === true;
+                    shouldPauseThemeForCameraNavigation === true
+                        ? false
+                        : (isContinuousTheme !== true ||
+                            (isContinuousTheme === true && isCameraNavigationOnlyInteractiveFrame === true) ||
+                            (isInteractiveFrame === true && !isCameraNavigationOnlyInteractiveFrame) ||
+                            (shouldUpdate === true && !isCameraNavigationOnlyInteractiveFrame) ||
+                            hasNonCameraNavigationForcedUpdate === true ||
+                            isBoardLoading === true ||
+                            shouldUseAnimation60Fps === true ||
+                            shouldUseAnimationLowFpsFrame === true ||
+                            this._forceThemeAnimationFrame === true);
+                if (shouldPauseThemeForCameraNavigation === true) {
+                    deferContinuousThemeForCameraMotion(this);
+                }
                 const isMenuOverlayUiEnabled = !isBoardLoading && renderDebugFlags.enableMenuOverlayUi !== false;
                 const isMultiSelectOverlayUiEnabled = !isBoardLoading && renderDebugFlags.enableMultiSelectOverlayUi !== false;
                 _profileSection('pipelineScheduling');
@@ -4886,17 +6366,15 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     shouldPreferCameraOnlyMotionPipeline === true &&
                     isCss3dEnabled === true &&
                     !!this.cssRenderer &&
-                    !hasFocusedTextOverlay &&
                     !hasEditingOverlay;
-                const canUseUaEarlyCameraOnlyFrame = !!(
+                const canUseUaEarlyCameraOnlyFrame = CAMERA_MOTION_PARTIAL_FRAME_SKIP_ENABLED === true && !!(
                     isUaStyleCameraTransformFrame === true &&
                     isFullResMode === true &&
                     isResidentMidFarLodFrame !== true &&
                     isCameraMoving === true &&
                     this.isSelecting !== true &&
                     typeof this.cssRenderer.renderCamera === 'function' &&
-                    this._css3dVisualChangedThisFrame !== true &&
-                    this._css3dVisualChangedSinceLastRender !== true
+                    !hasPendingCss3dStructuralTransformWork
                 );
                 if (canUseUaEarlyCameraOnlyFrame) {
                     this._fullResMotionFrozen = true;
@@ -4909,20 +6387,35 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this._businessAutomationEdgeLayer?.isConnected) {
                         this._businessAutomationEdgesDeferredForMotion = true;
                     }
+                    if (hasPendingCss3dVisualWork) {
+                        this._css3dVisualDeferredForMotion = true;
+                    }
 
-                    const approxVisibleNodeCountEarly = Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0);
-                    const totalNodeCountEarly = Number(this.nodeObjectsById?.size || 0);
-                    syncMindCanvasPerfClasses({
-                        moving: true,
-                        dense:
-                            approxVisibleNodeCountEarly >= DENSE_VISIBLE_NODE_THRESHOLD ||
-                            totalNodeCountEarly >= DENSE_TOTAL_NODE_THRESHOLD
-                    });
+                    const needsEarlyPerfClassSync = shouldSyncMindCanvasPerfClasses();
+                    const approxVisibleNodeCountEarly =
+                        needsEarlyPerfClassSync || shouldCaptureFramePerf
+                            ? Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0)
+                            : 0;
+                    if (needsEarlyPerfClassSync) {
+                        const totalNodeCountEarly = Number(this.nodeObjectsById?.size || 0);
+                        syncMindCanvasPerfClasses({
+                            moving: true,
+                            dense:
+                                approxVisibleNodeCountEarly >= DENSE_VISIBLE_NODE_THRESHOLD ||
+                                totalNodeCountEarly >= DENSE_TOTAL_NODE_THRESHOLD
+                        });
+                    }
 
-                    if ((this.frameCount % CAMERA_MOTION_WEBGL_FRAME_INTERVAL) === 0) {
+                    const shouldSampleWebglDuringCameraMotion =
+                        renderDebugFlags.sampleWebglDuringCameraMotion === true &&
+                        (this.frameCount % CAMERA_MOTION_WEBGL_FRAME_INTERVAL) === 0;
+                    let usedWebglCanvasCameraTransformEarly = false;
+                    if (shouldSampleWebglDuringCameraMotion) {
                         updateCursorDomElement(this);
                         if (isWebglRenderEnabled && this.renderer && this.scene && this.camera) {
+                            this._clearWebglCanvasCameraTransform();
                             this.renderer.render(this.scene, this.camera);
+                            this._recordWebglRenderedCameraState();
                             const renderInfo = this.renderer?.info?.render || null;
                             this._lastWebglRenderInfo = renderInfo ? {
                                 calls: Number(renderInfo.calls || 0),
@@ -4932,17 +6425,62 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                                 uaEarlyCameraOnly: true
                             } : null;
                         }
-                    } else if (isWebglRenderEnabled) {
-                        this._lastWebglRenderInfo = {
-                            calls: 0,
-                            triangles: 0,
-                            points: 0,
-                            lines: 0,
-                            skipped: true,
-                            uaEarlyCameraOnly: true
-                        };
+                    } else if (isWebglRenderEnabled &&
+                        canUseWebglCanvasTransformForCameraMotion(this) === true) {
+                        usedWebglCanvasCameraTransformEarly =
+                            this._applyWebglCanvasCameraTransform() === true;
+                        this._webglCameraMotionDeferred = true;
+                        if (usedWebglCanvasCameraTransformEarly === true) {
+                            deferContinuousThemeForCameraMotion(this);
+                            this._lastWebglRenderInfo = {
+                                calls: 0,
+                                triangles: 0,
+                                points: 0,
+                                lines: 0,
+                                skipped: true,
+                                webglCanvasCameraTransform: true,
+                                uaEarlyCameraOnly: true
+                            };
+                        } else if (this.renderer && this.scene && this.camera) {
+                            let hiddenEarlyCameraMotionThemeObject = null;
+                            this._clearWebglCanvasCameraTransform();
+                            if (this._isMotionGridThemeEnabled() === true &&
+                                this.currentThemeObject &&
+                                this.currentThemeObject.visible !== false) {
+                                hiddenEarlyCameraMotionThemeObject = this.currentThemeObject;
+                                hiddenEarlyCameraMotionThemeObject.visible = false;
+                            }
+                            try {
+                                this.renderer.render(this.scene, this.camera);
+                            } finally {
+                                if (hiddenEarlyCameraMotionThemeObject) {
+                                    hiddenEarlyCameraMotionThemeObject.visible = true;
+                                }
+                            }
+                            this._recordWebglRenderedCameraState();
+                            const renderInfo = this.renderer?.info?.render || null;
+                            this._lastWebglRenderInfo = renderInfo ? {
+                                calls: Number(renderInfo.calls || 0),
+                                triangles: Number(renderInfo.triangles || 0),
+                                points: Number(renderInfo.points || 0),
+                                lines: Number(renderInfo.lines || 0),
+                                backgroundThemeHidden: hiddenEarlyCameraMotionThemeObject ? true : undefined,
+                                uaEarlyCameraOnly: true,
+                                webglCanvasCameraBootstrap: true
+                            } : null;
+                        } else {
+                            this._lastWebglRenderInfo = {
+                                calls: 0,
+                                triangles: 0,
+                                points: 0,
+                                lines: 0,
+                                skipped: true,
+                                uaEarlyCameraOnly: true
+                            };
+                        }
                     }
 
+                    this._syncMotionGridLayerForCameraNavigation(usedWebglCanvasCameraTransformEarly);
                     this.cssRenderer.renderCamera(this.camera);
                     _profileSection('uaEarlyCameraOnly');
 
@@ -5006,21 +6544,126 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     this._scheduleAnimationLoop(loop, 0);
                     return;
                 }
+                const canUseUaStationaryCameraNavigationFrame = CAMERA_MOTION_PARTIAL_FRAME_SKIP_ENABLED === true && !!(
+                    isUaStyleCameraTransformFrame === true &&
+                    isFullResMode === true &&
+                    isResidentMidFarLodFrame !== true &&
+                    isCameraMoving !== true &&
+                    (this.isPanning === true || this.isZooming === true) &&
+                    this.isSelecting !== true &&
+                    !isNodeInteracting &&
+                    !hasNonCameraNavigationForcedUpdate &&
+                    !hasPendingNearCssWarmup &&
+                    !hasEditingOverlay &&
+                    !hasPendingCss3dStructuralTransformWork &&
+                    !hasPendingCss3dVisualWork &&
+                    shouldUpdate !== true &&
+                    !isBoardLoading &&
+                    this.isWindowResizing !== true
+                );
+                if (canUseUaStationaryCameraNavigationFrame) {
+                    this._fullResMotionFrozen = true;
+                    this._wasViewStateMotionFrozenLastFrame = true;
+                    this._wasLodMotionFrozenLastFrame = false;
+                    this._preserveVisibleSetThisFrame = true;
+                    this._lastVisibilityCullingSkipReason = 'ua-stationary-camera-navigation';
+                    if (this._businessAutomationEdgeVisualLayer?.isConnected ||
+                        this._businessAutomationEdgeLayer?.isConnected) {
+                        this._businessAutomationEdgesDeferredForMotion = true;
+                    }
+                    if (this._overlayDirty === true || hasFocusedTextOverlay) {
+                        this._deferPassiveOverlayRefresh = true;
+                    }
+                    if (isWebglRenderEnabled) {
+                        this._lastWebglRenderInfo = {
+                            calls: 0,
+                            triangles: 0,
+                            points: 0,
+                            lines: 0,
+                            skipped: true,
+                            uaStationaryCameraNavigation: true
+                        };
+                    }
+
+                    _profileSection('uaStationaryCameraNavigation');
+
+                    const frameEnd = performance.now();
+                    const frameDuration = frameEnd - frameStart;
+                    this._lastFrameDurationMs = frameDuration;
+                    this._lastFrameMetricsAt = frameEnd;
+                    if (shouldCaptureFramePerf) {
+                        const sectionTimes = {};
+                        Object.entries(_frameProfTimes)
+                            .filter(([key, value]) => key !== 'visibleNodes' && typeof value === 'number')
+                            .forEach(([key, value]) => {
+                                sectionTimes[key] = Number(value.toFixed(2));
+                            });
+                        this._lastFramePerfProfile = {
+                            durationMs: Number(frameDuration.toFixed(2)),
+                            update: false,
+                            cameraZ: Number((this.camera?.position?.z || 0).toFixed(2)),
+                            isZooming: this.isZooming === true,
+                            isPanning: this.isPanning === true,
+                            isCameraMoving: false,
+                            isInLodMode: false,
+                            lodBand: this.lodRenderer?._currentLodBand || null,
+                            visibleNodes: Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0),
+                            freezeVisibility: true,
+                            freezeLod: false,
+                            freezeFullRes: true,
+                            residentMidFarStable: false,
+                            residentDirty: false,
+                            residentBandChanging: false,
+                            viewSyncMode: 'ua-stationary-camera-navigation',
+                            lodUpdateCalled: false,
+                            lodUpdateSkipped: true,
+                            lodUpdateSkipReason: 'ua-stationary-camera-navigation',
+                            lodSkipReason: '',
+                            lodDirtyReason: '',
+                            lodDirtyState: null,
+                            viewSyncBreakdown: null,
+                            shouldRunVisibilityCulling: false,
+                            visibilityStableSkip: true,
+                            visibilitySkipReason: 'ua-stationary-camera-navigation',
+                            incrementalPanVisibility: false,
+                            shouldSyncCss3dTransforms: false,
+                            shouldRenderCss3d: false,
+                            usedCss3dCameraFastPath: false,
+                            uaStationaryCameraNavigation: true,
+                            shouldSyncTextOverlays: false,
+                            usedPassiveOverlayCameraFastPath: false,
+                            passiveOverlaySuppressed: this._suppressPassiveDomOverlayDuringZoom === true,
+                            webgl: this._lastWebglRenderInfo || null,
+                            sections: sectionTimes
+                        };
+                        updateFramePerfPeakProfile(this, this._lastFramePerfProfile, frameEnd);
+                    } else if (this._lastFramePerfProfile) {
+                        this._lastFramePerfProfile = null;
+                    }
+
+                    this._lastAnimationLoopDelayMs = CAMERA_STATIONARY_INTERACTION_FRAME_DELAY_MS;
+                    this._animationLoopExecuting = false;
+                    this._scheduleAnimationLoop(loop, CAMERA_STATIONARY_INTERACTION_FRAME_DELAY_MS);
+                    return;
+                }
                 const isMotionFreezeEligible =
                     (this.isZooming === true || this.isPanning === true || isCameraMoving === true) &&
                     !isNodeInteracting &&
                     !hasNonCameraNavigationForcedUpdate &&
                     !hasPendingNearCssWarmup &&
                     !this.isWindowResizing;
+                const needsPerfClassSync = shouldSyncMindCanvasPerfClasses();
                 const approxVisibleNodeCount = Number(this._visibleIds?.size || this._prevVisibleIds?.size || 0);
                 const totalNodeCount = Number(this.nodeObjectsById?.size || 0);
                 const shouldUseDensePerfClass =
                     approxVisibleNodeCount >= DENSE_VISIBLE_NODE_THRESHOLD ||
                     totalNodeCount >= DENSE_TOTAL_NODE_THRESHOLD;
-                syncMindCanvasPerfClasses({
-                    moving: isInteractiveFrame === true,
-                    dense: shouldUseDensePerfClass
-                });
+                if (needsPerfClassSync) {
+                    syncMindCanvasPerfClasses({
+                        moving: isInteractiveFrame === true,
+                        dense: shouldUseDensePerfClass
+                    });
+                }
                 const isMotionHeavyScene =
                     approxVisibleNodeCount >= AUTO_FREEZE_VISIBLE_NODE_THRESHOLD ||
                     Number(this._lastFrameDurationMs || 0) >= AUTO_FREEZE_FRAME_MS ||
@@ -5049,7 +6692,6 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 const shouldFreezeFullResDuringMotion =
                     isFullResMode &&
                     isMotionFreezeEligible &&
-                    !hasFocusedTextOverlay &&
                     !hasEditingOverlay &&
                     (
                         isUaStyleCameraTransformFrame === true ||
@@ -5160,7 +6802,11 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 // ▼▼▼ [Perf] CSS3D 동기화/렌더 스로틀 (정지 프레임은 스킵) ▼▼▼
                 const hasResidentCssMediaFallback =
                     isLodModeActive === true &&
-                    this.lodRenderer?.shouldRenderCss3dInLod?.() === true;
+                    (
+                        (this.isPanning === true || this.isZooming === true || isCameraMoving === true)
+                            ? this.lodRenderer?.hasCss3dLodCandidates?.() === true
+                            : this.lodRenderer?.shouldRenderCss3dInLod?.() === true
+                    );
                 const shouldUpdateResidentCssMediaFallback =
                     hasResidentCssMediaFallback === true &&
                     (
@@ -5340,12 +6986,16 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     );
 
                 const isInLodMode = this.lodRenderer?.isInLODMode === true;
-                const shouldRenderCss3dInLod = isInLodMode && this.lodRenderer?.shouldRenderCss3dInLod?.() === true;
+                const shouldRenderCss3dInLod = isInLodMode && (
+                    (this.isPanning === true || this.isZooming === true || isCameraMoving === true)
+                        ? this.lodRenderer?.hasCss3dLodCandidates?.() === true
+                        : this.lodRenderer?.shouldRenderCss3dInLod?.() === true
+                );
                 const shouldRenderPassiveDomTextOverlay =
-                    useTextOverlayV2 &&
+                    isPassiveDomOverlayRuntimeEnabled &&
                     window.MindMapTextOverlayV2?.shouldRenderPassiveDomOverlays?.(this) === true;
                 const hasLiveInteractiveDomOverlay =
-                    useTextOverlayV2 &&
+                    isPassiveDomOverlayRuntimeEnabled &&
                     window.MindMapTextOverlayV2?.hasLiveInteractiveOverlay?.(this) === true;
                 const hasPassiveDomOverlaySurface =
                     shouldRenderPassiveDomTextOverlay ||
@@ -5360,6 +7010,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     )
                 );
                 const hasOverlayFocus = hasFocusedTextOverlay || hasEditingOverlay;
+                const hasMotionBlockingOverlayFocus = hasEditingOverlay;
                 const visibleOverlayCount = Math.max(
                     Number(this._visibleIds?.size || 0),
                     Number(this._prevVisibleIds?.size || 0)
@@ -5370,7 +7021,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     !isInLodMode &&
                     !isCtrlWheelVerticalScrolling &&
                     !isCameraNavigationOverlayPriority &&
-                    !hasOverlayFocus &&
+                    !hasMotionBlockingOverlayFocus &&
                     !isNodeInteracting &&
                     !hasNonCameraNavigationForcedUpdate &&
                     !hasPendingNearCssWarmup &&
@@ -5427,7 +7078,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     this._deferPassiveOverlayRefresh === true &&
                     shouldDeferInteractivePassiveOverlayRefresh &&
                     !isInLodMode &&
-                    !hasOverlayFocus &&
+                    !hasMotionBlockingOverlayFocus &&
                     !isNodeInteracting &&
                     !hasNonCameraNavigationForcedUpdate &&
                     !this.isWindowResizing;
@@ -5450,7 +7101,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     !isInLodMode &&
                     (this.isZooming === true || this.isPanning === true || isCameraMoving) &&
                     !isCtrlWheelVerticalScrolling &&
-                    !hasOverlayFocus &&
+                    !hasMotionBlockingOverlayFocus &&
                     !hasOverlayV2DirtyState &&
                     !effectiveOverlayDirty &&
                     isCameraOnlyOverlayFrame &&
@@ -5469,11 +7120,14 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     useTextOverlayV2 &&
                     hasPassiveDomOverlaySurface &&
                     !isPassiveOverlaySuppressed &&
-                    !hasOverlayFocus &&
+                    !hasMotionBlockingOverlayFocus &&
                     !hasOverlayV2DirtyState &&
                     !this.isWindowResizing &&
                     (this.isZooming === true || this.isPanning === true || isCameraMoving);
-                window.MindMapTextOverlayV2?.setMotionHint?.(this, shouldUsePassiveOverlayMotionHint);
+                if (isPassiveDomOverlayRuntimeEnabled ||
+                    this._textOverlayV2State?.motionHintActive === true) {
+                    window.MindMapTextOverlayV2?.setMotionHint?.(this, shouldUsePassiveOverlayMotionHint);
+                }
                 const isPureCss3dCameraMotionFrame = !!(
                     this.cssRenderer &&
                     isCss3dEnabled &&
@@ -5484,12 +7138,14 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     !isNodeInteracting &&
                     !hasNonCameraNavigationForcedUpdate &&
                     !hasPendingNearCssWarmup &&
-                    !hasOverlayFocus &&
-                    this._css3dVisualChangedThisFrame !== true &&
-                    this._css3dVisualChangedSinceLastRender !== true &&
+                    !hasMotionBlockingOverlayFocus &&
+                    !hasPendingCss3dStructuralTransformWork &&
                     !lodVisualEpochChangedThisFrame &&
                     this.isWindowResizing !== true
                 );
+                if (isPureCss3dCameraMotionFrame === true && hasPendingCss3dVisualWork) {
+                    this._css3dVisualDeferredForMotion = true;
+                }
 
                 // 4. CSS3D Position Sync
                 // ----------------------------------------------------------------
@@ -5511,19 +7167,29 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     !isCameraMoving &&
                     !isNodeInteracting &&
                     !this.isWindowResizing;
-                window.MindMapNodes?.updateAnimatedImageStatusTextures?.(this, frameStart, {
-                    allowAnimation: shouldAnimateImageStatusTextures
-                });
+                if (this._activeImageStatusTextures?.size > 0) {
+                    window.MindMapNodes?.updateAnimatedImageStatusTextures?.(this, frameStart, {
+                        allowAnimation: shouldAnimateImageStatusTextures
+                    });
+                }
 
                 // 5. Cursor DOM position
                 // ----------------------------------------------------------------
-                if (!isPureCss3dCameraMotionFrame || (this.frameCount % CAMERA_MOTION_WEBGL_FRAME_INTERVAL) === 0) {
+                const shouldSampleWebglDuringCameraMotion =
+                    renderDebugFlags.sampleWebglDuringCameraMotion === true &&
+                    (this.frameCount % CAMERA_MOTION_WEBGL_FRAME_INTERVAL) === 0;
+                if (!isPureCss3dCameraMotionFrame || shouldSampleWebglDuringCameraMotion) {
                     updateCursorDomElement(this);
                 }
 
                 // 6. Theme Animation
                 // ----------------------------------------------------------------
                 const isGpuParticleTheme = this.currentThemeName === 'Space3D' || this.currentThemeName === 'SpiritFlow';
+                const shouldUseMotionGridThemeSubstitute =
+                    false &&
+                    isCameraNavigationOnlyInteractiveFrame === true &&
+                    this._isMotionGridThemeEnabled() === true &&
+                    !isBoardLoading;
                 const shouldForceGpuParticleAnimation =
                     isGpuParticleTheme &&
                     !isBoardLoading &&
@@ -5542,8 +7208,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this._forceThemeAnimationFrame === true;
                     const themeAnimationInterval = this._getThemeAnimationInterval(isInteractiveFrame, themeAnimationMode);
                     const effectiveThemeAnimationInterval =
-                        isPureCss3dCameraMotionFrame === true && forceThemeCameraUpdate !== true
-                            ? Math.max(themeAnimationInterval, CAMERA_MOTION_WEBGL_FRAME_INTERVAL)
+                        isCameraNavigationOnlyInteractiveFrame === true
+                            ? 1
                             : themeAnimationInterval;
                     const shouldCheckThemeAnimation =
                         forceThemeCameraUpdate ||
@@ -5568,40 +7234,122 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this._forceThemeAnimationFrame = false;
                     }
                 }
-
+
                 // 7. Render
                 // ----------------------------------------------------------------
                 _profileSection('css3dSync');
+                const shouldFinalizeWebglCanvasCameraTransform = !!(
+                    this._webglCanvasMotionTransformActive === true &&
+                    isCameraNavigationOnlyInteractiveFrame !== true
+                );
+                const shouldUseAnimationCadenceForWebglFrame =
+                    isCameraNavigationOnlyInteractiveFrame === true
+                        ? false
+                        : (shouldUseAnimation60Fps === true || shouldUseAnimationLowFpsFrame === true);
                 const shouldRenderWebglFrame =
                     isWebglRenderEnabled &&
                     (
                         isBoardLoading === true ||
                         shouldUpdate === true ||
+                        shouldFinalizeWebglCanvasCameraTransform === true ||
                         isInteractiveFrame === true ||
-                        shouldUseAnimation60Fps === true ||
-                        shouldUseAnimationLowFpsFrame === true ||
+                        shouldUseAnimationCadenceForWebglFrame === true ||
                         themeAnimatedThisFrame === true
                     ) &&
                     (
                         isPureCss3dCameraMotionFrame !== true ||
                         themeAnimatedThisFrame === true ||
-                        (this.frameCount % CAMERA_MOTION_WEBGL_FRAME_INTERVAL) === 0
+                        shouldSampleWebglDuringCameraMotion === true
                     );
+                const shouldHideBackgroundThemeDuringCameraNavigation = !!(
+                    shouldUseMotionGridThemeSubstitute === true &&
+                    this.currentThemeObject &&
+                    this.currentThemeObject.visible !== false
+                );
+                let hiddenCameraMotionThemeObject = null;
+                let usedWebglCanvasCameraTransform = false;
+                const shouldUseWebglCanvasCameraTransformFrame = !!(
+                    isWebglRenderEnabled &&
+                    isCameraNavigationOnlyInteractiveFrame === true &&
+                    canUseWebglCanvasTransformForCameraMotion(this) === true &&
+                    shouldUpdate !== true &&
+                    themeAnimatedThisFrame !== true &&
+                    shouldUseAnimationCadenceForWebglFrame !== true &&
+                    !isBoardLoading &&
+                    this._lastWebglRenderedCameraState &&
+                    this.renderer?.domElement
+                );
                 if (shouldRenderWebglFrame) {
-                    this.renderer.render(this.scene, this.camera);
-                    const renderInfo = this.renderer?.info?.render || null;
-                    this._lastWebglRenderInfo = renderInfo ? {
-                        calls: Number(renderInfo.calls || 0),
-                        triangles: Number(renderInfo.triangles || 0),
-                        points: Number(renderInfo.points || 0),
-                        lines: Number(renderInfo.lines || 0)
-                    } : null;
+                    if (shouldUseWebglCanvasCameraTransformFrame === true &&
+                        this._applyWebglCanvasCameraTransform() === true) {
+                        usedWebglCanvasCameraTransform = true;
+                        this._webglCameraMotionDeferred = true;
+                        this._lastWebglRenderInfo = {
+                            calls: 0,
+                            triangles: 0,
+                            points: 0,
+                            lines: 0,
+                            skipped: true,
+                            webglCanvasCameraTransform: true
+                        };
+                    } else {
+                        this._clearWebglCanvasCameraTransform();
+                        if (shouldHideBackgroundThemeDuringCameraNavigation) {
+                            hiddenCameraMotionThemeObject = this.currentThemeObject;
+                            hiddenCameraMotionThemeObject.visible = false;
+                        }
+                        try {
+                            this.renderer.render(this.scene, this.camera);
+                        } finally {
+                            if (hiddenCameraMotionThemeObject) {
+                                hiddenCameraMotionThemeObject.visible = true;
+                            }
+                        }
+                        this._recordWebglRenderedCameraState();
+                        const renderInfo = this.renderer?.info?.render || null;
+                        this._lastWebglRenderInfo = renderInfo ? {
+                            calls: Number(renderInfo.calls || 0),
+                            triangles: Number(renderInfo.triangles || 0),
+                            points: Number(renderInfo.points || 0),
+                            lines: Number(renderInfo.lines || 0),
+                            backgroundThemeHidden: hiddenCameraMotionThemeObject ? true : undefined
+                        } : null;
+                    }
                 } else if (isWebglRenderEnabled) {
-                    this._lastWebglRenderInfo = { calls: 0, triangles: 0, points: 0, lines: 0, skipped: true };
+                    if (isPureCss3dCameraMotionFrame === true) {
+                        this._webglCameraMotionDeferred = true;
+                    }
+                    if (isCameraNavigationOnlyInteractiveFrame === true &&
+                        canUseWebglCanvasTransformForCameraMotion(this) === true) {
+                        usedWebglCanvasCameraTransform = this._applyWebglCanvasCameraTransform() === true;
+                    } else {
+                        this._clearWebglCanvasCameraTransform();
+                    }
+                    this._lastWebglRenderInfo = {
+                        calls: 0,
+                        triangles: 0,
+                        points: 0,
+                        lines: 0,
+                        skipped: true,
+                        webglCanvasCameraTransform: usedWebglCanvasCameraTransform || undefined
+                    };
                 } else if (isBoardLoading) {
+                    this._clearWebglCanvasCameraTransform();
                     this._lastWebglRenderInfo = { calls: 0, triangles: 0, points: 0, lines: 0 };
                 }
-
+                if (shouldUseMotionGridThemeSubstitute === true &&
+                    isCameraNavigationOnlyInteractiveFrame === true) {
+                    this._syncMotionGridLayerForCameraNavigation(usedWebglCanvasCameraTransform);
+                }
+                if (shouldRenderWebglFrame === true &&
+                    this._motionGridVisible === true &&
+                    isPureCss3dCameraMotionFrame !== true &&
+                    this.isPanning !== true &&
+                    this.isZooming !== true &&
+                    isCameraMoving !== true) {
+                    this._syncMotionGridLayer(false);
+                }
+
                 _profileSection('webglRender');
                 // ▼▼▼ [FIX] LOD 모드(MID/FAR)에서는 CSS3D 렌더러 호출 건너뛰기 ▼▼▼
                 // CSS3D가 모두 display:none이어도 렌더러가 813개 객체를 순회하면서 시간 소비
@@ -5632,6 +7380,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 }
                 _profileSection('css3dRender');
                 if (canUseCss3dCameraFastPath) {
+                    this._syncMotionGridLayerForCameraNavigation(usedWebglCanvasCameraTransform);
                     this.cssRenderer.renderCamera(this.camera);
                 }
                 _profileSection('css3dCamera');
@@ -5644,18 +7393,32 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 );
                 const hasBusinessAutomationConnectionDraft =
                     window.MindMapCss3DManager?.hasBusinessAutomationConnectionDraft?.() === true;
-                const shouldThrottleBusinessAutomationEdgesForCameraMotion =
-                    isPureCss3dCameraMotionFrame === true &&
+                const shouldTransformBusinessAutomationEdgesForCameraMotion =
+                    hasBusinessAutomationEdgeLayer &&
                     hasBusinessAutomationConnectionDraft !== true &&
+                    window.MindMapCss3DManager?.syncBusinessAutomationEdgesForCameraMotion &&
+                    (this.isPanning === true || this.isZooming === true || isCameraMoving === true) &&
                     !isNodeInteracting &&
-                    hasNonCameraNavigationForcedUpdate !== true &&
-                    visibilityChangedThisFrame !== true &&
-                    lodVisualEpochChangedThisFrame !== true &&
-                    (this.frameCount % CAMERA_MOTION_WEBGL_FRAME_INTERVAL) !== 0;
+                    !hasNonCameraNavigationForcedUpdate &&
+                    !visibilityChangedThisFrame &&
+                    !lodVisualEpochChangedThisFrame &&
+                    window.MindMapCss3DManager.syncBusinessAutomationEdgesForCameraMotion(this) === true;
+                const shouldThrottleBusinessAutomationEdgesForCameraMotion = shouldTransformBusinessAutomationEdgesForCameraMotion === true;
+                const shouldDeferBusinessAutomationEdgesForCameraMotion = !!(
+                    hasBusinessAutomationEdgeLayer &&
+                    hasBusinessAutomationConnectionDraft !== true &&
+                    shouldThrottleBusinessAutomationEdgesForCameraMotion !== true &&
+                    (this.isPanning === true || this.isZooming === true || isCameraMoving === true) &&
+                    !isNodeInteracting &&
+                    !hasNonCameraNavigationForcedUpdate &&
+                    !visibilityChangedThisFrame &&
+                    !lodVisualEpochChangedThisFrame
+                );
                 const shouldSyncBusinessAutomationEdges =
                     hasBusinessAutomationEdgeLayer &&
                     window.MindMapCss3DManager?.renderBusinessAutomationEdges &&
                     shouldThrottleBusinessAutomationEdgesForCameraMotion !== true &&
+                    shouldDeferBusinessAutomationEdgesForCameraMotion !== true &&
                     (
                         this._businessAutomationEdgeRenderActive === true ||
                         this.isPanning === true ||
@@ -5666,7 +7429,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         visibilityChangedThisFrame === true ||
                         lodVisualEpochChangedThisFrame === true
                     );
-                if (shouldThrottleBusinessAutomationEdgesForCameraMotion === true) {
+                if (shouldThrottleBusinessAutomationEdgesForCameraMotion === true ||
+                    shouldDeferBusinessAutomationEdgesForCameraMotion === true) {
                     this._businessAutomationEdgesDeferredForMotion = true;
                 }
                 if (shouldSyncBusinessAutomationEdges) {
@@ -5684,8 +7448,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 const shouldSyncTextOverlays =
                     effectiveOverlayDirty === true ||
                     (useTextOverlayV2
-                        ? (hasOverlayV2DirtyState || shouldRefreshPassiveDomTextOverlay || shouldFinalizePassiveOverlayLayout || (hasOverlayFocus && shouldUpdateCss3d))
-                        : (hasOverlayFocus && shouldUpdateCss3d));
+                        ? (hasOverlayV2DirtyState || shouldRefreshPassiveDomTextOverlay || shouldFinalizePassiveOverlayLayout || (hasMotionBlockingOverlayFocus && shouldUpdateCss3d))
+                        : (hasMotionBlockingOverlayFocus && shouldUpdateCss3d));
                 const shouldAttemptPassiveOverlayCameraFastPath =
                     useTextOverlayV2 &&
                     shouldUsePassiveOverlayCameraFastPath;
@@ -5698,7 +7462,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 const shouldDeferFullPassiveOverlayFallback =
                     shouldFallbackToFullPassiveOverlayRefresh &&
                     shouldRenderPassiveDomTextOverlay &&
-                    !hasOverlayFocus &&
+                    !hasMotionBlockingOverlayFocus &&
                     (!isInLodMode || hasLiveInteractiveDomOverlay) &&
                     (isInteractiveFrame || this.isPanning === true || this.isZooming === true || visibleOverlayCount > 80);
                 if (useTextOverlayV2 && isPassiveOverlaySuppressed) {
@@ -5717,7 +7481,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     // full overlay layout update instead of waiting for the
                     // next deferred refresh window.
                     window.MindMapTextOverlayV2.updateFrame(this);
-                    if (shouldRenderPassiveDomTextOverlay && !hasOverlayFocus && (!isInLodMode || hasLiveInteractiveDomOverlay)) {
+                    if (shouldRenderPassiveDomTextOverlay && !hasMotionBlockingOverlayFocus && (!isInLodMode || hasLiveInteractiveDomOverlay)) {
                         this._lastPassiveOverlayFullRefreshAt = frameStart;
                         this._overlayDebugRefreshAgeMs = 0;
                         this._overlayDebugRefreshDeferred = false;
@@ -5749,7 +7513,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     (this.isPanning === true || this.isZooming === true || isCameraMoving === true) &&
                     !isNodeInteracting &&
                     !hasNonCameraNavigationForcedUpdate &&
-                    !hasOverlayFocus &&
+                    !hasMotionBlockingOverlayFocus &&
                     !this.isWindowResizing;
                 if (isMenuOverlayUiEnabled && window.MindMapMenuManager && shouldDeferFloatingUiDuringMotion !== true) {
                     window.MindMapMenuManager.update();
@@ -5998,6 +7762,11 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 return;
             }
 
+            if (!immediate && this._viewStatePersistTimer) {
+                this._viewStatePersistNeedsFreshSnapshot = true;
+                return;
+            }
+
             const snapshot = this.buildViewStateSnapshot();
             if (!snapshot) {
                 return;
@@ -6010,6 +7779,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             this._pendingViewStateSnapshot = snapshot;
             this._pendingViewStateKey = snapshotKey;
+            this._viewStatePersistNeedsFreshSnapshot = false;
 
             const isCameraStillSettling = () => {
                 if (!this.camera) {
@@ -6047,10 +7817,24 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const persist = async () => {
                 this._viewStatePersistTimer = null;
                 if (!immediate && isNavigationActive()) {
+                    this._viewStatePersistNeedsFreshSnapshot = true;
                     armPersistTimer();
                     return;
                 }
 
+                if (this._viewStatePersistNeedsFreshSnapshot === true) {
+                    const freshSnapshot = this.buildViewStateSnapshot();
+                    if (!freshSnapshot) {
+                        this._viewStatePersistNeedsFreshSnapshot = false;
+                        return;
+                    }
+
+                    const freshSnapshotKey = this.buildViewStateKey(freshSnapshot);
+                    this._pendingViewStateSnapshot = freshSnapshot;
+                    this._pendingViewStateKey = freshSnapshotKey;
+                    this._viewStatePersistNeedsFreshSnapshot = false;
+                }
+
                 const pendingSnapshot = this._pendingViewStateSnapshot;
                 const pendingKey = this._pendingViewStateKey;
                 if (!pendingSnapshot || !pendingKey || pendingKey === this._lastPersistedViewStateKey) {
@@ -6077,6 +7861,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     clearTimeout(this._viewStatePersistTimer);
                     this._viewStatePersistTimer = null;
                 }
+                this._viewStatePersistNeedsFreshSnapshot = false;
                 void persist();
                 return;
             }
@@ -6128,6 +7913,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
         hide() {
             this.scheduleViewStatePersist(true);
+            this._syncMotionGridLayer(false);
             if (this.container) {
                 if (window.MindMapMenuManager?.hideMenu) {
                     window.MindMapMenuManager.hideMenu();
@@ -6225,11 +8011,23 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
         cleanupAndDispose() {
             if (!this.container) return;
             this.pauseAnimationLoop();
+            if (this._motionGridHideTimer) {
+                clearTimeout(this._motionGridHideTimer);
+                this._motionGridHideTimer = null;
+            }
+            if (this._motionGridLayer) {
+                this._motionGridLayer.remove();
+                this._motionGridLayer = null;
+                this._motionGridVisible = false;
+                this._lastMotionGridKey = '';
+                this._lastMotionGridTransformKey = '';
+            }
             removeCursorDomElement(this);
             if (this._viewStatePersistTimer) {
                 clearTimeout(this._viewStatePersistTimer);
                 this._viewStatePersistTimer = null;
             }
+            this._viewStatePersistNeedsFreshSnapshot = false;
 
             MindMapInteractions.removeEventListeners(this);
             MindMapDnD.removeEventListeners(this);
@@ -6429,7 +8227,9 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 if (this.lodRenderer?.requestVisualRefresh) {
                     this.lodRenderer.requestVisualRefresh('project-thumbnail-capture');
                 }
+                this._clearWebglCanvasCameraTransform();
                 this.renderer.render(this.scene, this.camera);
+                this._recordWebglRenderedCameraState();
                 if (this.cssRenderer && typeof this.cssRenderer.render === 'function') {
                     this.cssRenderer.render(this.cssScene || this.scene, this.camera);
                 }