@mindexec/cli 0.2.291 → 0.2.293

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindexec/cli",
-  "version": "0.2.291",
+  "version": "0.2.293",
   "description": "MindExec local runtime and bridge CLI",
   "main": "server.js",
   "type": "module",

package/wwwroot/_content/MindExecution.Shared/css/mind-map-overrides.css

@@ -208,55 +208,11 @@ body.mind-debug-video-tint-layout .css3d-resolution-wrapper.node-type-video .vid
 }
 /* ▲▲▲ [Fix] ▲▲▲ */
 
-body.is-zooming .css3d-resolution-wrapper,
-body.is-panning .css3d-resolution-wrapper,
-#css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper,
-#css3d-dom-wrapper.is-panning .css3d-resolution-wrapper {
-    -webkit-transition: none !important;
-    transition: none !important;
-}
-
-body.is-zooming .css3d-resolution-wrapper.selected,
-body.is-panning .css3d-resolution-wrapper.selected,
-body.mindcanvas-is-moving .css3d-resolution-wrapper.selected,
-body.mindcanvas-is-dense .css3d-resolution-wrapper.selected,
-#css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper.selected,
-#css3d-dom-wrapper.is-panning .css3d-resolution-wrapper.selected,
-#css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper.selected,
-#css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper.selected {
-    -webkit-filter: none !important;
-    filter: none !important;
-}
-
 body.is-resizing .css3d-resolution-wrapper {
     -webkit-transition: none !important;
     transition: none !important;
 }
 
-html.mindcanvas-platform-apple body.is-zooming .css3d-resolution-wrapper.selected,
-html.mindcanvas-platform-apple body.is-panning .css3d-resolution-wrapper.selected,
-html.mindcanvas-platform-apple body.mindcanvas-is-moving .css3d-resolution-wrapper.selected,
-html.mindcanvas-platform-apple body.mindcanvas-is-dense .css3d-resolution-wrapper.selected {
-    -webkit-filter: none !important;
-    filter: none !important;
-}
-
-body.is-zooming .node-menu-wrapper,
-body.is-panning .node-menu-wrapper,
-body.is-zooming .map-node-memo__icon-popover,
-body.is-panning .map-node-memo__icon-popover,
-#css3d-dom-wrapper.is-zooming .node-menu-wrapper,
-#css3d-dom-wrapper.is-panning .node-menu-wrapper,
-#css3d-dom-wrapper.is-zooming .map-node-memo__icon-popover,
-#css3d-dom-wrapper.is-panning .map-node-memo__icon-popover {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
-    -webkit-transition: none !important;
-    transition: none !important;
-}
-
 .mindcanvas-node-toolbar,
 .global-ai-input-shell {
     position: relative;
@@ -1131,17 +1087,14 @@ body.is-panning .map-node-memo__icon-popover,
 /* ▼▼▼ [CRITICAL] Zoom/Drag 중 포인터 이벤트 비활성화 ▼▼▼ */
 /* Hover raycast is already short-circuited in JS during pan, so keep CSS hover/focus
    intact while middle-button panning. We still suppress hit-testing for zoom/drag. */
-#css3d-dom-wrapper.is-dragging,
-#css3d-dom-wrapper.is-zooming,
-body.is-zooming #css3d-dom-wrapper {
+#css3d-dom-wrapper.is-dragging {
     pointer-events: none !important;
 }
 
 html.mindcanvas-browser-selection-locked,
 body.mindcanvas-browser-selection-locked,
 body.is-node-dragging,
-body.is-resizing,
-body.is-zooming {
+body.is-resizing {
     user-select: none !important;
     -webkit-user-select: none !important;
 }
@@ -1149,10 +1102,6 @@ body.is-zooming {
 body.mindcanvas-browser-selection-locked *,
 body.is-node-dragging *,
 body.is-resizing *,
-#css3d-dom-wrapper.is-zooming *,
-body.is-zooming #css3d-dom-wrapper *,
-#css3d-dom-wrapper.is-panning,
-#css3d-dom-wrapper.is-panning *,
 #css3d-dom-wrapper.is-dragging,
 #css3d-dom-wrapper.is-dragging *,
 .multi-select-overlay,
@@ -1172,13 +1121,7 @@ body.is-node-dragging .mind-map-text-overlay-v2-card *,
 body.is-resizing .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment,
 body.is-resizing .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment *,
 body.is-resizing .mind-map-text-overlay-v2-card,
-body.is-resizing .mind-map-text-overlay-v2-card *,
-body.is-zooming .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment,
-body.is-zooming .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment *,
-#css3d-dom-wrapper.is-zooming .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment,
-#css3d-dom-wrapper.is-zooming .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment *,
-#css3d-dom-wrapper.is-panning .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment,
-#css3d-dom-wrapper.is-panning .mind-map-text-overlay.mind-map-text-overlay-selectable .mind-map-text-overlay-fragment * {
+body.is-resizing .mind-map-text-overlay-v2-card * {
     user-select: none !important;
     -webkit-user-select: none !important;
     cursor: inherit !important;
@@ -1518,11 +1461,6 @@ html.mindcanvas-platform-apple .css3d-resolution-wrapper.is-automation-relation-
     pointer-events: auto;
 }
 
-body.is-panning .mind-map-text-overlay-v2-card.is-passive .mind-map-text-overlay-v2-body,
-#css3d-dom-wrapper.is-panning .mind-map-text-overlay-v2-card.is-passive .mind-map-text-overlay-v2-body {
-    pointer-events: none !important;
-}
-
 .mind-map-text-overlay-v2-shell {
     width: 100%;
     height: 100%;
@@ -2456,14 +2394,7 @@ body.is-panning .mind-map-text-overlay-v2-card.is-passive .mind-map-text-overlay
 /* Template launcher and Multi Desktop Monitor own their visual chrome on the
    card itself. Keep the CSS3D wrapper neutral so motion CSS3D and the passive
    DOM overlay do not stack different selection chrome. */
-.css3d-resolution-wrapper.node-type-templatelauncher.selected,
-body.is-panning .css3d-resolution-wrapper.node-type-templatelauncher.selected,
-body.is-zooming .css3d-resolution-wrapper.node-type-templatelauncher.selected,
-body.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-templatelauncher.selected,
-#css3d-dom-wrapper.is-panning .css3d-resolution-wrapper.node-type-templatelauncher.selected,
-#css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper.node-type-templatelauncher.selected,
-#css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-templatelauncher.selected,
-body.mindcanvas-is-dense .css3d-resolution-wrapper.node-type-templatelauncher.selected {
+.css3d-resolution-wrapper.node-type-templatelauncher.selected {
     outline: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
@@ -3348,59 +3279,6 @@ body.mindcanvas-is-dense .css3d-resolution-wrapper.node-type-templatelauncher.se
     }
 }
 
-/* Lightweight CSS3D motion path.
-   Reference graph tools are useful here because they keep node DOM cheap:
-   while the camera is moving, retain the canonical CSS3D surface but remove
-   decorative compositor-heavy effects from every CSS3D node, including
-   selected and agent-style nodes. */
-body.is-zooming .css3d-resolution-wrapper,
-body.is-panning .css3d-resolution-wrapper,
-body.is-node-dragging .css3d-resolution-wrapper,
-body.is-resizing .css3d-resolution-wrapper,
-body.mindcanvas-is-moving .css3d-resolution-wrapper,
-body.mindcanvas-is-dense .css3d-resolution-wrapper,
-#css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper,
-#css3d-dom-wrapper.is-panning .css3d-resolution-wrapper,
-#css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper,
-#css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper {
-    -webkit-transition: none !important;
-    transition: none !important;
-    -webkit-filter: none !important;
-    filter: none !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
-}
-
-body.is-zooming .css3d-resolution-wrapper .css3d-dynamic-node,
-body.is-panning .css3d-resolution-wrapper .css3d-dynamic-node,
-body.is-node-dragging .css3d-resolution-wrapper .css3d-dynamic-node,
-body.is-resizing .css3d-resolution-wrapper .css3d-dynamic-node,
-body.mindcanvas-is-moving .css3d-resolution-wrapper .css3d-dynamic-node,
-body.mindcanvas-is-dense .css3d-resolution-wrapper .css3d-dynamic-node,
-body.is-zooming .css3d-resolution-wrapper [id^="css3d-node-"],
-body.is-panning .css3d-resolution-wrapper [id^="css3d-node-"],
-body.is-node-dragging .css3d-resolution-wrapper [id^="css3d-node-"],
-body.is-resizing .css3d-resolution-wrapper [id^="css3d-node-"],
-body.mindcanvas-is-moving .css3d-resolution-wrapper [id^="css3d-node-"],
-body.mindcanvas-is-dense .css3d-resolution-wrapper [id^="css3d-node-"],
-#css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper .css3d-dynamic-node,
-#css3d-dom-wrapper.is-panning .css3d-resolution-wrapper .css3d-dynamic-node,
-#css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper .css3d-dynamic-node,
-#css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper .css3d-dynamic-node,
-#css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper [id^="css3d-node-"],
-#css3d-dom-wrapper.is-panning .css3d-resolution-wrapper [id^="css3d-node-"],
-#css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper [id^="css3d-node-"],
-#css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper [id^="css3d-node-"] {
-    -webkit-transition: none !important;
-    transition: none !important;
-    -webkit-filter: none !important;
-    filter: none !important;
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
-}
-
 /* Temporary lightweight node visuals.
    CSS3D and passive overlay node surfaces intentionally avoid shadows/glow.
    Keep outlines, borders, and status color so selection and node state remain readable. */

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 = '20260620-css3d-flat-wheel-v737';
+    const MINDMAP_CORE_BUILD_ID = '20260620-css3d-flat-pan-v750';
     const CanvasPhase = Object.freeze({
         Booting: 'booting',
         BoardFileLoading: 'board-file-loading',
@@ -114,9 +114,9 @@
     const LOCAL_SNAP_GRID_DEFAULT_OPACITY = 0.42;
     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_MOTION_WEBGL_TRANSFORM_TRANSLATE_BUCKET_PX = 0.25;
-    const CAMERA_MOTION_WEBGL_TRANSFORM_SCALE_BUCKET = 0.0005;
+    const CAMERA_MOTION_WEBGL_CANVAS_TRANSFORM_ENABLED = false;
+    const CAMERA_MOTION_WEBGL_TRANSFORM_TRANSLATE_BUCKET_PX = 0.001;
+    const CAMERA_MOTION_WEBGL_TRANSFORM_SCALE_BUCKET = 0.000001;
     const CSS3D_FLAT_CAMERA_MOTION_ENABLED = true;
     const CAMERA_STATIONARY_INTERACTION_FRAME_DELAY_MS = 48;
     const CAMERA_ZOOM_END_DELAY_MS = 150;
@@ -606,6 +606,40 @@
         return false;
     }
 
+    function renderCss3dSceneForCurrentCamera(module, scene, camera, reason = 'css3d-render') {
+        const renderer = module?.cssRenderer || null;
+        if (!renderer || !scene || !camera) {
+            return false;
+        }
+
+        const renderDebugFlags = module.renderDebugFlags || getRenderDebugFlagsSnapshot();
+        if (renderDebugFlags.enableCss3d === false) {
+            return false;
+        }
+
+        if (typeof renderer.renderFlat === 'function' &&
+            canUseFlatCss3dCameraMotion(module, renderer, camera, renderDebugFlags) === true) {
+            const usedFlatSceneRender = renderer.renderFlat(scene, camera, {
+                translateBucketPx: CAMERA_MOTION_WEBGL_TRANSFORM_TRANSLATE_BUCKET_PX,
+                scaleBucket: CAMERA_MOTION_WEBGL_TRANSFORM_SCALE_BUCKET
+            });
+            if (usedFlatSceneRender === true) {
+                module._lastCss3dCameraMotionMode = 'flat';
+                module._lastCss3dCameraMotionReason = reason;
+                return true;
+            }
+        }
+
+        if (typeof renderer.render === 'function') {
+            renderer.render(scene, camera);
+            module._lastCss3dCameraMotionMode = 'matrix3d';
+            module._lastCss3dCameraMotionReason = reason;
+            return true;
+        }
+
+        return false;
+    }
+
     function markWebglSurfaceFrozenForZoom(module, mode) {
         if (!module) {
             return false;
@@ -641,6 +675,64 @@
         return true;
     }
 
+    function shouldDeferFullResWebglForCss3dCameraMotion(module, options = {}) {
+        if (!module ||
+            module.isLoading === true ||
+            module.isDraggingNode === true ||
+            module.isDraggingMultipleNodes === true ||
+            module.isResizing === true ||
+            module.isWindowResizing === true ||
+            module.isSelecting === true) {
+            return false;
+        }
+
+        const isCameraNavigationActive =
+            options.isCameraNavigationOnlyInteractiveFrame === true ||
+            module.isPanning === true ||
+            module.isZooming === true ||
+            module._cameraMovingThisFrame === true;
+        if (isCameraNavigationActive !== true) {
+            return false;
+        }
+
+        if (options.isFullResMode === false ||
+            module.lodRenderer?.isInLODMode === true ||
+            options.isNodeInteracting === true ||
+            options.hasNonCameraNavigationForcedUpdate === true) {
+            return false;
+        }
+
+        const renderer = module.cssRenderer || null;
+        const camera = module.camera || null;
+        const flags = options.renderDebugFlags || module.renderDebugFlags || getRenderDebugFlagsSnapshot();
+        return !!(
+            flags.enableCss3d !== false &&
+            renderer &&
+            camera &&
+            canUseFlatCss3dCameraMotion(module, renderer, camera, flags) === true
+        );
+    }
+
+    function markFullResWebglDeferredForCss3dCameraMotion(module, reason = 'fullres-css3d-camera-motion') {
+        if (!module) {
+            return false;
+        }
+
+        module._clearWebglCanvasCameraTransform?.();
+        module._webglCameraMotionDeferred = true;
+        module._themeCameraMotionDeferred = true;
+        module._lastWebglRenderInfo = {
+            calls: 0,
+            triangles: 0,
+            points: 0,
+            lines: 0,
+            skipped: true,
+            webglDeferredForCss3dCameraMotion: true,
+            reason
+        };
+        return true;
+    }
+
     function hasBusinessAutomationEdgeLayer(module) {
         return !!(
             module?._businessAutomationEdgeVisualLayer?.isConnected ||
@@ -1836,6 +1928,12 @@
                 markWebglSurfaceFrozenForZoom(module, 'uaUltraEarlyCameraOnly');
             } else if (module.isZooming === true) {
                 deferWebglBootstrapForCameraMotion(module, 'uaUltraEarlyCameraOnly');
+            } else if (shouldDeferFullResWebglForCss3dCameraMotion(module, {
+                isCameraNavigationOnlyInteractiveFrame: true,
+                isFullResMode: true,
+                renderDebugFlags
+            }) === true) {
+                markFullResWebglDeferredForCss3dCameraMotion(module, 'uaUltraEarlyCameraOnly');
             } else {
                 module._clearWebglCanvasCameraTransform?.();
                 module.renderer.render(module.scene, module.camera);
@@ -1943,7 +2041,10 @@
             !module.lodRenderer ||
             module.lodRenderer.isInLODMode !== true ||
             typeof module.lodRenderer.canUseUltraResidentCameraOnlyFrame !== 'function' ||
-            module.lodRenderer.canUseUltraResidentCameraOnlyFrame(module.camera, module) !== true) {
+                module.lodRenderer.canUseUltraResidentCameraOnlyFrame(module.camera, module, {
+                    isCameraMoving,
+                    isCameraNavigationActive
+                }) !== true) {
             return false;
         }
 
@@ -4019,6 +4120,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this._webglCameraMotionDeferred = false;
             this._themeCameraMotionDeferred = false;
             this._css3dVisualDeferredForMotion = false;
+            this._backgroundGridLayerHost = null;
             this._motionGridLayer = null;
             this._motionGridVisible = false;
             this._motionGridHideTimer = null;
@@ -4100,6 +4202,13 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             const roundedX = Math.round(nextX * 2) / 2;
             const roundedY = Math.round(nextY * 2) / 2;
+            if (this.isZooming === true &&
+                this._lastLocalSnapGridPointerSnapKey &&
+                Math.abs(Number(this._lastSnapGridClientX || 0) - roundedX) < 0.001 &&
+                Math.abs(Number(this._lastSnapGridClientY || 0) - roundedY) < 0.001) {
+                this._localSnapGridStyleDeferredForZoom = true;
+                return false;
+            }
             const fallbackGrid = Math.max(1, Number(this.GRID_SIZE || 10));
             let pointerSnapKey = `screen:${Math.round(roundedX / fallbackGrid)}|${Math.round(roundedY / fallbackGrid)}`;
             if (this.container && this.camera?.isPerspectiveCamera) {
@@ -4173,9 +4282,9 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             };
         }
 
-        _placeBackgroundGridLayer(layer) {
-            if (!layer || !this.container) {
-                return false;
+        _ensureBackgroundGridLayerHost() {
+            if (!this.container || typeof document === 'undefined') {
+                return null;
             }
 
             const webglElement = this.renderer?.domElement;
@@ -4187,16 +4296,64 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         ? cssElement
                         : null;
 
+            let host = this._backgroundGridLayerHost;
+            if (!host || !host.isConnected) {
+                host = document.createElement('div');
+                host.className = 'mindcanvas-background-hint-layer-host';
+                host.setAttribute('aria-hidden', 'true');
+                host.style.position = 'absolute';
+                host.style.inset = '0';
+                host.style.zIndex = '0';
+                host.style.pointerEvents = 'none';
+                host.style.overflow = 'visible';
+                host.style.background = 'transparent';
+                host.style.contain = 'layout style paint';
+                host.style.transform = 'translate3d(0, 0, 0)';
+                host.style.transition = 'none';
+                this._backgroundGridLayerHost = host;
+            }
+
+            if (this.container.style.isolation !== 'isolate') {
+                this.container.style.isolation = 'isolate';
+            }
+
             if (anchorElement) {
-                if (layer.parentNode !== this.container ||
-                    layer.nextSibling !== anchorElement) {
-                    this.container.insertBefore(layer, anchorElement);
+                if (host.parentNode !== this.container ||
+                    host.nextSibling !== anchorElement) {
+                    this.container.insertBefore(host, anchorElement);
                 }
-            } else if (layer.parentNode !== this.container) {
-                this.container.insertBefore(layer, this.container.firstChild || null);
+            } else if (host.parentNode !== this.container) {
+                this.container.insertBefore(host, this.container.firstChild || null);
             }
 
-            return layer.parentNode === this.container;
+            if (webglElement?.style && webglElement.style.zIndex !== '1') {
+                webglElement.style.zIndex = '1';
+            }
+            if (cssElement?.style && cssElement.style.zIndex !== '2') {
+                cssElement.style.zIndex = '2';
+            }
+
+            return host.parentNode === this.container ? host : null;
+        }
+
+        _placeBackgroundGridLayer(layer) {
+            if (!layer || !this.container) {
+                return false;
+            }
+
+            const host = this._ensureBackgroundGridLayerHost();
+            if (!host) {
+                return false;
+            }
+
+            if (layer.parentNode !== host) {
+                host.appendChild(layer);
+            }
+            if (layer.style.zIndex !== '0') {
+                layer.style.zIndex = '0';
+            }
+
+            return layer.parentNode === host;
         }
 
         _ensureLocalSnapGridLayer() {
@@ -4478,10 +4635,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const layerTop = snappedCenter.centerY - LOCAL_SNAP_GRID_RADIUS_PX;
 
             if (this.isZooming === true && !!this._lastLocalSnapGridKey) {
-                const transformKey = `${Math.round(layerLeft * 2)}|${Math.round(layerTop * 2)}`;
+                const snappedLayerLeft = Math.round(layerLeft);
+                const snappedLayerTop = Math.round(layerTop);
+                const transformKey = `${snappedLayerLeft}|${snappedLayerTop}`;
                 if (transformKey !== this._lastLocalSnapGridTransformKey) {
                     this._lastLocalSnapGridTransformKey = transformKey;
-                    layer.style.transform = `translate3d(${layerLeft.toFixed(2)}px, ${layerTop.toFixed(2)}px, 0)`;
+                    layer.style.transform = `translate3d(${snappedLayerLeft}px, ${snappedLayerTop}px, 0)`;
                 }
                 this._lastLocalSnapGridPositionRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
                 this._localSnapGridStyleDeferredForZoom = true;
@@ -4524,10 +4683,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 this._localSnapGridStyleDeferredForZoom = true;
             }
 
-            const transformKey = `${Math.round(layerLeft * 2)}|${Math.round(layerTop * 2)}`;
+            const snappedLayerLeft = Math.round(layerLeft);
+            const snappedLayerTop = Math.round(layerTop);
+            const transformKey = `${snappedLayerLeft}|${snappedLayerTop}`;
             if (transformKey !== this._lastLocalSnapGridTransformKey) {
                 this._lastLocalSnapGridTransformKey = transformKey;
-                layer.style.transform = `translate3d(${layerLeft.toFixed(2)}px, ${layerTop.toFixed(2)}px, 0)`;
+                layer.style.transform = `translate3d(${snappedLayerLeft}px, ${snappedLayerTop}px, 0)`;
             }
             this._lastLocalSnapGridPositionRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
 
@@ -4586,11 +4747,13 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const snappedCenter = this._getLocalSnapGridSnappedScreenCenter(centerX, centerY, width, height, this.camera);
             const layerLeft = snappedCenter.centerX - LOCAL_SNAP_GRID_RADIUS_PX;
             const layerTop = snappedCenter.centerY - LOCAL_SNAP_GRID_RADIUS_PX;
-            const transformKey = `${Math.round(layerLeft * 2)}|${Math.round(layerTop * 2)}`;
+            const snappedLayerLeft = Math.round(layerLeft);
+            const snappedLayerTop = Math.round(layerTop);
+            const transformKey = `${snappedLayerLeft}|${snappedLayerTop}`;
 
             if (transformKey !== this._lastLocalSnapGridTransformKey) {
                 this._lastLocalSnapGridTransformKey = transformKey;
-                layer.style.transform = `translate3d(${layerLeft.toFixed(2)}px, ${layerTop.toFixed(2)}px, 0)`;
+                layer.style.transform = `translate3d(${snappedLayerLeft}px, ${snappedLayerTop}px, 0)`;
             }
             this._lastLocalSnapGridPositionRevision = pointerRevision;
 
@@ -4796,8 +4959,15 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 get: () => this._forceUpdateFrameCount || 0,
                 set: (value) => {
                     const nextValue = Math.max(0, Math.floor(Number(value) || 0));
+                    const previousValue = Math.max(0, Math.floor(Number(this._forceUpdateFrameCount || 0)));
                     this._forceUpdateFrameCount = nextValue;
-                    if (nextValue > 0) {
+                    const needsWake =
+                        nextValue > 0 &&
+                        (
+                            nextValue > previousValue ||
+                            (!this.animationFrameId && !this._animationIdleTimerId)
+                        );
+                    if (needsWake) {
                         this.requestAnimationWake('force-update-frames');
                     }
                 }
@@ -5454,7 +5624,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this.renderer.domElement.style.left = '0';
             this.renderer.domElement.style.width = '100%';
             this.renderer.domElement.style.height = '100%';
-            this.renderer.domElement.style.zIndex = '0';
+            this.renderer.domElement.style.zIndex = '1';
             this.renderer.domElement.style.outline = 'none';
 
             if (this.container) this.container.appendChild(this.renderer.domElement);
@@ -5474,7 +5644,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 cssEl.style.padding = '0';
                 cssEl.style.width = '100%';
                 cssEl.style.height = '100%';
-                cssEl.style.zIndex = '1';
+                cssEl.style.zIndex = '2';
                 cssEl.style.pointerEvents = 'auto'; // 마우스/휠 이벤트 수신
                 cssEl.id = 'css3d-dom-wrapper';
 
@@ -5722,6 +5892,10 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const transformTranslateX = Math.round(translateX / translateBucket) * translateBucket;
             const transformTranslateY = Math.round(translateY / translateBucket) * translateBucket;
             const transformScale = Math.round(scale / scaleBucket) * scaleBucket;
+            const originX = width * 0.5;
+            const originY = height * 0.5;
+            const matrixTranslateX = ((1 - transformScale) * originX) + transformTranslateX;
+            const matrixTranslateY = ((1 - transformScale) * originY) + transformTranslateY;
             const transformKey = [
                 Math.round(width),
                 Math.round(height),
@@ -5732,9 +5906,11 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             if (transformKey !== this._lastWebglCanvasMotionTransformKey) {
                 this._lastWebglCanvasMotionTransformKey = transformKey;
-                element.style.transformOrigin = '50% 50%';
-                element.style.willChange = 'transform';
-                element.style.transform = `translate3d(${transformTranslateX.toFixed(3)}px, ${transformTranslateY.toFixed(3)}px, 0) scale(${transformScale.toFixed(5)})`;
+                if (this._webglCanvasMotionTransformActive !== true) {
+                    element.style.transformOrigin = '0 0';
+                    element.style.willChange = 'transform';
+                }
+                element.style.transform = `matrix(${transformScale.toFixed(6)}, 0, 0, ${transformScale.toFixed(6)}, ${matrixTranslateX.toFixed(3)}, ${matrixTranslateY.toFixed(3)})`;
             }
 
             this._webglCanvasMotionTransformActive = true;
@@ -6835,7 +7011,6 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
                 if (this.isZooming && !isCameraMoving && timeSinceLastInput > CAMERA_ZOOM_END_DELAY_MS) {
                     this.isZooming = false;
-                    this.cssRenderer?.domElement?.classList?.remove?.('is-zooming');
                     if (FRAME_PERF_DEBUG) {
                         console.log(`[Perf] Zoom ended (${timeSinceLastInput.toFixed(0)}ms since last input)`);
                     }
@@ -7329,12 +7504,19 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this._lastWebglRenderedCameraState &&
                         this.renderer?.domElement
                     );
+                    const shouldDeferFullResWebglForImmediateMotion =
+                        shouldDeferFullResWebglForCss3dCameraMotion(this, {
+                            isCameraNavigationOnlyInteractiveFrame: true,
+                            isFullResMode: true,
+                            renderDebugFlags
+                        }) === true;
                     if (canReuseWebglCanvasForImmediateMotion === true) {
                         deferContinuousThemeForCameraMotion(this);
                     }
                     if (this.isZooming !== true &&
                         shouldFreezeWebglCanvasForImmediateZoom !== true &&
                         !canReuseWebglCanvasForImmediateMotion &&
+                        shouldDeferFullResWebglForImmediateMotion !== true &&
                         renderDebugFlags.enableThemeAnimation !== false &&
                         isLocalSnapGridOnlyTheme(this) !== true &&
                         this.currentThemeObject &&
@@ -7374,6 +7556,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                                 markWebglSurfaceFrozenForZoom(this, 'uaVisualOnlyMotion');
                             } else if (this.isZooming === true) {
                                 deferWebglBootstrapForCameraMotion(this, 'uaVisualOnlyMotion');
+                            } else if (shouldDeferFullResWebglForImmediateMotion === true) {
+                                markFullResWebglDeferredForCss3dCameraMotion(this, 'uaVisualOnlyMotion');
                             } else {
                                 this._clearWebglCanvasCameraTransform();
                                 this.renderer.render(this.scene, this.camera);
@@ -7512,12 +7696,19 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         this._lastWebglRenderedCameraState &&
                         this.renderer?.domElement
                     );
+                    const shouldDeferFullResWebglForStationaryMotion =
+                        shouldDeferFullResWebglForCss3dCameraMotion(this, {
+                            isCameraNavigationOnlyInteractiveFrame: true,
+                            isFullResMode: isFullResMode === true,
+                            renderDebugFlags
+                        }) === true;
                     if (canReuseWebglCanvasForStationaryMotion === true) {
                         deferContinuousThemeForCameraMotion(this);
                     }
                     if (this.isZooming !== true &&
                         shouldFreezeWebglCanvasForStationaryZoom !== true &&
                         !canReuseWebglCanvasForStationaryMotion &&
+                        shouldDeferFullResWebglForStationaryMotion !== true &&
                         renderDebugFlags.enableThemeAnimation !== false &&
                         isLocalSnapGridOnlyTheme(this) !== true &&
                         this.currentThemeObject &&
@@ -7557,6 +7748,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                                 markWebglSurfaceFrozenForZoom(this, 'uaStationaryVisualMotion');
                             } else if (this.isZooming === true) {
                                 deferWebglBootstrapForCameraMotion(this, 'uaStationaryVisualMotion');
+                            } else if (shouldDeferFullResWebglForStationaryMotion === true) {
+                                markFullResWebglDeferredForCss3dCameraMotion(this, 'uaStationaryVisualMotion');
                             } else {
                                 this._clearWebglCanvasCameraTransform();
                                 this.renderer.render(this.scene, this.camera);
@@ -8765,8 +8958,17 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     isGpuParticleTheme &&
                     !isBoardLoading &&
                     allowContinuousThemeAnimationThisFrame === true;
+                const shouldDeferFullResWebglForNormalCss3dMotion =
+                    shouldDeferFullResWebglForCss3dCameraMotion(this, {
+                        isCameraNavigationOnlyInteractiveFrame,
+                        isFullResMode: isFullResMode === true,
+                        isNodeInteracting,
+                        hasNonCameraNavigationForcedUpdate,
+                        renderDebugFlags
+                    }) === true;
                 let themeAnimatedThisFrame = false;
                 if (allowContinuousThemeAnimationThisFrame === true &&
+                    shouldDeferFullResWebglForNormalCss3dMotion !== true &&
                     (isThemeAnimationEnabled || shouldForceGpuParticleAnimation) &&
                     isLocalSnapGridOnlyTheme(this) !== true &&
                     this.currentThemeObject &&
@@ -8818,8 +9020,20 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     isCameraNavigationOnlyInteractiveFrame === true
                         ? false
                         : (shouldUseAnimation60Fps === true || shouldUseAnimationLowFpsFrame === true);
+                const shouldHoldWebglCanvasTransformDuringCameraNavigation = !!(
+                    isWebglRenderEnabled &&
+                    isCameraNavigationOnlyInteractiveFrame === true &&
+                    canUseWebglCanvasTransformForCameraMotion(this) === true &&
+                    !isBoardLoading &&
+                    this._lastWebglRenderedCameraState &&
+                    this.renderer?.domElement &&
+                    !isNodeInteracting &&
+                    !hasNonCameraNavigationForcedUpdate &&
+                    this.isWindowResizing !== true
+                );
                 const shouldRenderWebglFrame =
                     isWebglRenderEnabled &&
+                    shouldHoldWebglCanvasTransformDuringCameraNavigation !== true &&
                     (
                         isBoardLoading === true ||
                         shouldUpdate === true ||
@@ -8828,6 +9042,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         shouldUseAnimationCadenceForWebglFrame === true ||
                         themeAnimatedThisFrame === true
                     ) &&
+                    shouldDeferFullResWebglForNormalCss3dMotion !== true &&
                     (
                         isPureCss3dCameraMotionFrame !== true ||
                         themeAnimatedThisFrame === true ||
@@ -8873,6 +9088,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                             themeAnimatedThisFrame !== true &&
                             shouldFinalizeWebglCanvasCameraTransform !== true) {
                             deferWebglBootstrapForCameraMotion(this, 'normalZoomCameraMotion');
+                        } else if (shouldDeferFullResWebglForNormalCss3dMotion === true) {
+                            markFullResWebglDeferredForCss3dCameraMotion(this, 'normalCss3dCameraMotion');
                         } else {
                             this._clearWebglCanvasCameraTransform();
                             if (shouldHideBackgroundThemeDuringCameraNavigation) {
@@ -8898,27 +9115,48 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         }
                     }
                 } else if (isWebglRenderEnabled) {
-                    if (isPureCss3dCameraMotionFrame === true) {
+                    if (shouldDeferFullResWebglForNormalCss3dMotion === true) {
+                        markFullResWebglDeferredForCss3dCameraMotion(this, 'normalCss3dCameraMotion');
+                    } else if (isPureCss3dCameraMotionFrame === true) {
                         this._webglCameraMotionDeferred = true;
-                    }
-                    const shouldFreezeWebglCanvasTransformForZoom =
-                        shouldFreezeWebglSurfaceForZoom(this) === true;
-                    if (isCameraNavigationOnlyInteractiveFrame === true &&
-                        shouldFreezeWebglCanvasTransformForZoom !== true &&
-                        canUseWebglCanvasTransformForCameraMotion(this) === true) {
-                        usedWebglCanvasCameraTransform = this._applyWebglCanvasCameraTransform() === true;
+                        const shouldFreezeWebglCanvasTransformForZoom =
+                            shouldFreezeWebglSurfaceForZoom(this) === true;
+                        if (isCameraNavigationOnlyInteractiveFrame === true &&
+                            shouldFreezeWebglCanvasTransformForZoom !== 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,
+                            webglSurfaceFrozenForZoom: shouldFreezeWebglCanvasTransformForZoom || undefined
+                        };
                     } else {
-                        this._clearWebglCanvasCameraTransform();
+                        const shouldFreezeWebglCanvasTransformForZoom =
+                            shouldFreezeWebglSurfaceForZoom(this) === true;
+                        if (isCameraNavigationOnlyInteractiveFrame === true &&
+                            shouldFreezeWebglCanvasTransformForZoom !== 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,
+                            webglSurfaceFrozenForZoom: shouldFreezeWebglSurfaceForZoom(this) || undefined
+                        };
                     }
-                    this._lastWebglRenderInfo = {
-                        calls: 0,
-                        triangles: 0,
-                        points: 0,
-                        lines: 0,
-                        skipped: true,
-                        webglCanvasCameraTransform: usedWebglCanvasCameraTransform || undefined,
-                        webglSurfaceFrozenForZoom: shouldFreezeWebglCanvasTransformForZoom || undefined
-                    };
                 } else if (isBoardLoading) {
                     this._clearWebglCanvasCameraTransform();
                     this._lastWebglRenderInfo = { calls: 0, triangles: 0, points: 0, lines: 0 };
@@ -8968,7 +9206,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                         cssEl.scrollLeft = 0;
                     }
 
-                    this.cssRenderer.render(this.cssScene || this.scene, this.camera);
+                    renderCss3dSceneForCurrentCamera(this, this.cssScene || this.scene, this.camera, 'css3d-full-render');
                     this._css3dVisualChangedThisFrame = false;
                     this._css3dVisualChangedSinceLastRender = false;
                 }
@@ -9634,6 +9872,10 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 this._lastLocalSnapGridKey = '';
                 this._lastLocalSnapGridTransformKey = '';
             }
+            if (this._backgroundGridLayerHost) {
+                this._backgroundGridLayerHost.remove();
+                this._backgroundGridLayerHost = null;
+            }
             removeCursorDomElement(this);
             if (this._viewStatePersistTimer) {
                 clearTimeout(this._viewStatePersistTimer);
@@ -9844,7 +10086,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 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);
+                    renderCss3dSceneForCurrentCamera(this, this.cssScene || this.scene, this.camera, 'project-thumbnail-pre-capture');
                 }
             } catch (error) {
                 console.warn('[ProjectThumbnail] render before capture failed:', error);

package/wwwroot/_content/MindExecution.Shared/js/mind-map-css3d-manager.js

@@ -828,63 +828,18 @@
                 max-height: none !important;
             }
 
-            /* Keep CSS3D nodes readable during camera motion, but drop expensive
-               decorative effects consistently across selected and agent-style nodes. */
-            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper,
-            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper,
-            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper,
-            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper {
-                transition: none !important;
-                -webkit-transition: none !important;
-                filter: none !important;
-                -webkit-filter: none !important;
-            }
-
-            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper .css3d-dynamic-node,
-            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper .css3d-dynamic-node,
-            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper .css3d-dynamic-node,
-            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper .css3d-dynamic-node,
-            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper [id^="css3d-node-"],
-            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper [id^="css3d-node-"],
-            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper [id^="css3d-node-"],
-            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper [id^="css3d-node-"] {
-                box-shadow: none !important;
-                filter: none !important;
-                -webkit-filter: none !important;
-                backdrop-filter: none !important;
-                -webkit-backdrop-filter: none !important;
-            }
-
-            #css3d-dom-wrapper.is-zooming .embed-content iframe,
-            #css3d-dom-wrapper.is-zooming .embed-iframe-host iframe,
-            #css3d-dom-wrapper.is-zooming .embed-card,
-            #css3d-dom-wrapper.is-zooming .embed-card *,
-            #css3d-dom-wrapper.is-zooming .embed-action,
-            #css3d-dom-wrapper.is-zooming .embed-play-button,
             body.is-node-dragging .embed-content iframe,
             body.is-node-dragging .embed-iframe-host iframe,
             body.is-node-dragging .embed-card,
             body.is-node-dragging .embed-card *,
             body.is-node-dragging .embed-action,
             body.is-node-dragging .embed-play-button,
-            #css3d-dom-wrapper.mindcanvas-is-moving .embed-content iframe,
-            #css3d-dom-wrapper.mindcanvas-is-moving .embed-iframe-host iframe,
-            #css3d-dom-wrapper.mindcanvas-is-moving .embed-card,
-            #css3d-dom-wrapper.mindcanvas-is-moving .embed-card *,
-            #css3d-dom-wrapper.mindcanvas-is-moving .embed-action,
-            #css3d-dom-wrapper.mindcanvas-is-moving .embed-play-button,
             .is-dragging .embed-content iframe,
             .is-dragging .embed-iframe-host iframe,
             .is-dragging .embed-card,
             .is-dragging .embed-card *,
             .is-dragging .embed-action,
-            .is-dragging .embed-play-button,
-            .is-panning .embed-content iframe,
-            .is-panning .embed-iframe-host iframe,
-            .is-panning .embed-card,
-            .is-panning .embed-card *,
-            .is-panning .embed-action,
-            .is-panning .embed-play-button {
+            .is-dragging .embed-play-button {
                 pointer-events: none !important;
             }
 
@@ -903,32 +858,13 @@
                 pointer-events: auto !important;
             }
 
-            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
-            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
             body.is-node-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
             body.is-node-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
-            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
-            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
             .is-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
-            .is-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
-            .is-panning .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
-            .is-panning .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe {
+            .is-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe {
                 pointer-events: none !important;
             }
 
-            #css3d-dom-wrapper.is-zooming .ai-loading-row.ai-loading-row-media,
-            #css3d-dom-wrapper.is-panning .ai-loading-row.ai-loading-row-media,
-            #css3d-dom-wrapper.mindcanvas-is-moving .ai-loading-row.ai-loading-row-media,
-            #css3d-dom-wrapper.mindcanvas-is-dense .ai-loading-row.ai-loading-row-media,
-            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
-            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
-            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
-            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper .map-node-memo__agent-console-panel {
-                box-shadow: none !important;
-                backdrop-filter: none !important;
-                -webkit-backdrop-filter: none !important;
-            }
-
             .ai-loading-row {
                 display: flex;
                 align-items: center;
@@ -9832,8 +9768,11 @@
             const transform = `translate3d(${translateX.toFixed(3)}px, ${translateY.toFixed(3)}px, 0) scale(${scale.toFixed(5)})`;
             for (const layer of [visualLayer, hitLayer]) {
                 if (!layer?.style) continue;
-                layer.style.transformOrigin = '50% 50%';
-                layer.style.willChange = 'transform';
+                if (module._businessAutomationEdgeCameraTransformActive !== true ||
+                    layer.style.willChange !== 'transform') {
+                    layer.style.transformOrigin = '50% 50%';
+                    layer.style.willChange = 'transform';
+                }
                 layer.style.transform = transform;
             }
             module._lastBusinessAutomationEdgeTransformKey = transformKey;

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

@@ -2,7 +2,6 @@ window.MindMapInteractions = (function () {
     const WHEEL_DEBUG = false;
     const WHEEL_PERF_DEBUG = false;
     const CTRL_WHEEL_SCROLL_EDGE_EPSILON = 2;
-    const PAN_LIVE_REFRESH_FORCE_FRAMES = 2;
     const MOTION_DOM_FANOUT_DELAY_MS = 180;
     const MOTION_DOM_FANOUT_ENABLED = false;
     const MOTION_WILL_CHANGE_ENABLE_DELAY_MS = 240;
@@ -26,11 +25,7 @@ window.MindMapInteractions = (function () {
     }
 
     function isBrowserSelectionLocked() {
-        const css3dWrapper = document?.getElementById?.('css3d-dom-wrapper');
-        return browserSelectionLockReasons.size > 0 ||
-            css3dWrapper?.classList?.contains?.('is-panning') === true ||
-            css3dWrapper?.classList?.contains?.('is-zooming') === true ||
-            css3dWrapper?.classList?.contains?.('is-dragging') === true;
+        return browserSelectionLockReasons.size > 0;
     }
 
     function handleBrowserSelectStart(event) {
@@ -97,11 +92,9 @@ window.MindMapInteractions = (function () {
     }
 
     function scheduleZoomMotionChrome(module) {
-        if (!module || typeof document === 'undefined') {
-            return;
-        }
-        if (MOTION_DOM_FANOUT_ENABLED !== true) {
-            clearZoomMotionChrome(module);
+        if (MOTION_DOM_FANOUT_ENABLED !== true ||
+            !module ||
+            typeof document === 'undefined') {
             return;
         }
 
@@ -111,13 +104,17 @@ window.MindMapInteractions = (function () {
             const targetElement = module?.cssRenderer?.domElement || null;
             if (module.isZooming === true) {
                 targetElement?.classList?.add?.('is-zooming');
+                module._zoomMotionChromeApplied = true;
             }
         }, MOTION_DOM_FANOUT_DELAY_MS);
     }
 
     function clearZoomMotionChrome(module) {
         clearModuleTimer(module, '_zoomMotionChromeTimer');
-        module?.cssRenderer?.domElement?.classList?.remove?.('is-zooming');
+        if (module?._zoomMotionChromeApplied === true) {
+            module.cssRenderer?.domElement?.classList?.remove?.('is-zooming');
+            module._zoomMotionChromeApplied = false;
+        }
     }
 
     function getPanMotionClassElement(module) {
@@ -125,12 +122,11 @@ window.MindMapInteractions = (function () {
     }
 
     function schedulePanMotionChrome(module) {
-        const element = getPanMotionClassElement(module);
-        if (!module || !element) {
+        if (MOTION_DOM_FANOUT_ENABLED !== true) {
             return;
         }
-        if (MOTION_DOM_FANOUT_ENABLED !== true) {
-            clearPanMotionChrome(module);
+        const element = getPanMotionClassElement(module);
+        if (!module || !element) {
             return;
         }
 
@@ -140,13 +136,17 @@ window.MindMapInteractions = (function () {
             const targetElement = getPanMotionClassElement(module);
             if (module.isPanning === true && targetElement) {
                 targetElement.classList.add('is-panning');
+                module._panMotionChromeApplied = true;
             }
         }, MOTION_DOM_FANOUT_DELAY_MS);
     }
 
     function clearPanMotionChrome(module) {
         clearModuleTimer(module, '_panMotionChromeTimer');
-        module?.cssRenderer?.domElement?.classList?.remove?.('is-panning');
+        if (module?._panMotionChromeApplied === true) {
+            module.cssRenderer?.domElement?.classList?.remove?.('is-panning');
+            module._panMotionChromeApplied = false;
+        }
     }
 
     function scheduleMotionWillChangeEnable(module) {
@@ -572,22 +572,9 @@ window.MindMapInteractions = (function () {
     }
 
     function requestPanLiveRefreshFrames(module) {
-        if (!module || PAN_LIVE_REFRESH_FORCE_FRAMES <= 0) {
+        if (!module) {
             return;
         }
-
-        module._forceUpdateFrames = Math.max(
-            Number(module._forceUpdateFrames || 0),
-            PAN_LIVE_REFRESH_FORCE_FRAMES
-        );
-        module._panLiveRefreshForceFrames = Math.max(
-            Number(module._panLiveRefreshForceFrames || 0),
-            PAN_LIVE_REFRESH_FORCE_FRAMES
-        );
-        module._cameraNavigationForceFrames = Math.max(
-            Number(module._cameraNavigationForceFrames || 0),
-            PAN_LIVE_REFRESH_FORCE_FRAMES
-        );
         wakeCameraNavigationAnimation(module, 'pan-input');
     }
 
@@ -6320,8 +6307,6 @@ window.MindMapInteractions = (function () {
         module.targetY -= normalizedDeltaY * panFactor;
         const panInputAt = performance.now();
         module._lastPanInputAt = panInputAt;
-        module._forceUpdateFrames = Math.max(module._forceUpdateFrames || 0, 2);
-        module._cameraNavigationForceFrames = Math.max(module._cameraNavigationForceFrames || 0, 2);
         module._deferPassiveOverlayRefresh = true;
         module._cameraNavigationOverlayInputTime = panInputAt;
         wakeCameraNavigationAnimation(module, 'trackpad-pan-input');
@@ -6372,18 +6357,18 @@ window.MindMapInteractions = (function () {
      * - 기존 performCameraZoom과 동일하지만 event 객체 대신 누적된 값 사용
      */
     function performCameraZoomBuffered(module, deltaY, clientX, clientY, options = {}) {
+        if (!module || !module.camera || !module.container) {
+        /*
         // ▼▼▼ [Fix] 안전 검사 추가 ▼▼▼
         if (!module || !module.camera || !module.container) {
+        */
             console.warn('[Wheel Buffer] Module, camera, or container not ready');
             return;
         }
+        /*
         // ▲▲▲ [Fix] ▲▲▲
         if (module._isLocalSnapGridThemeEnabled?.() === true ||
-            module._localSnapGridVisible === true ||
-            module._localSnapGridLayer?.isConnected === true) {
-            module.setLocalSnapGridClientPoint?.(clientX, clientY);
-        }
-
+        */
         let t0 = 0;
         let cameraZ = '?';
         if (WHEEL_PERF_DEBUG) {
@@ -6402,6 +6387,13 @@ window.MindMapInteractions = (function () {
             }
         }
         // ▼▼▼ [Fix] 휠 입력 시간 기록 (줌 종료 타이밍 계산용) ▼▼▼
+        // Keep wheel zoom in the cheap active-zoom local grid branch when the
+        // pointer has not moved. Exact grid style is reconciled after settle.
+        if (module._isLocalSnapGridThemeEnabled?.() === true ||
+            module._localSnapGridVisible === true ||
+            module._localSnapGridLayer?.isConnected === true) {
+            module.setLocalSnapGridClientPoint?.(clientX, clientY);
+        }
         module._zoomInputTime = Number(options?.inputTime || 0) > 0
             ? Number(options.inputTime)
             : performance.now();

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

@@ -51,7 +51,7 @@
     // ▲▲▲ [Usage] ▲▲▲
 
     // Procedural line rendering settings
-    const LOD_RENDERER_BUILD_ID = '20260614-remote-fleet-lod-css-v200';
+    const LOD_RENDERER_BUILD_ID = '20260620-css3d-flat-pan-v750';
     const DirtyKind = Object.freeze({
         ResidentFullRebuild: 'resident-full-rebuild',
         ResidentPatch: 'resident-patch',
@@ -2903,7 +2903,7 @@
                 (this.imageInstanceData?.nodeIds?.length || 0) > 0;
         }
 
-        canUseUltraResidentCameraOnlyFrame(camera = this._module?.camera, module = this._module) {
+        canUseUltraResidentCameraOnlyFrame(camera = this._module?.camera, module = this._module, options = {}) {
             if (FORCE_RESIDENT_INSTANCES_IN_MID_FAR !== true || !camera || !module) {
                 return false;
             }
@@ -2931,7 +2931,15 @@
             const multiSelectedIds = module?.multiSelectedNodeIds || new Set();
             const selectedNodeId = module?.selectedNodeIdJs || null;
             const selectionKey = buildLodSelectionKey(multiSelectedIds, selectedNodeId);
+            const isCameraNavigationActive = options?.isCameraNavigationActive === true ||
+                options?.isCameraMoving === true ||
+                module?.isPanning === true ||
+                module?.isZooming === true;
             if (this._lastAppliedLodSelectionKey !== selectionKey) {
+                if (isCameraNavigationActive === true) {
+                    this._residentCameraOnlyDeferredVisualWork = true;
+                    return true;
+                }
                 return false;
             }
 
@@ -2955,6 +2963,24 @@
                 this._residentCameraOnlyDeferredVisualWork = true;
             }
 
+            if (isCameraNavigationActive === true) {
+                const hasOnlyDeferrableVisualWork = !!(
+                    pendingSelectionCount > 0 ||
+                    this._residentRebuildPending === true
+                );
+                const hasStructuralResidentDirtyWork = !!(
+                    this._instancesDirty === true ||
+                    this._imageInstancesDirty === true ||
+                    this._positionsOnlyDirty === true ||
+                    this._isNodeArrayDirty === true ||
+                    dirtyPositionCount > 0
+                );
+                if (hasOnlyDeferrableVisualWork === true && hasStructuralResidentDirtyWork !== true) {
+                    this._residentCameraOnlyDeferredVisualWork = true;
+                    return true;
+                }
+            }
+
             return !(
                 this._instancesDirty === true ||
                 this._imageInstancesDirty === true ||

package/wwwroot/_content/MindExecution.Shared/js/renderers/CSS3DRenderer.js

@@ -55,12 +55,10 @@
             var cameraZ = Math.max(1, Number(position.z || 1));
             var cameraX = Number(position.x || 0);
             var cameraY = Number(position.y || 0);
-            var fov = Number(camera.fov || 45);
-            if (!Number.isFinite(cameraX) || !Number.isFinite(cameraY) || !Number.isFinite(cameraZ) || !Number.isFinite(fov)) return false;
+            var projectionScale = Number(camera.projectionMatrix && camera.projectionMatrix.elements ? camera.projectionMatrix.elements[5] : 0);
+            if (!Number.isFinite(cameraX) || !Number.isFinite(cameraY) || !Number.isFinite(cameraZ) || !Number.isFinite(projectionScale) || projectionScale <= 0) return false;
             if (Math.abs(Number(rotation.x || 0)) > 1e-5 || Math.abs(Number(rotation.y || 0)) > 1e-5 || Math.abs(Number(rotation.z || 0)) > 1e-5) return false;
-            var vfov = fov * Math.PI / 180;
-            var viewHeight = 2 * Math.tan(vfov / 2) * cameraZ;
-            var scale = _height / Math.max(1, viewHeight);
+            var scale = (projectionScale * _heightHalf) / cameraZ;
             var translateX = _widthHalf - cameraX * scale;
             var translateY = _heightHalf + cameraY * scale;
             var translateBucket = Math.max(0.001, Number(options && options.translateBucketPx || 0.25));
@@ -82,6 +80,7 @@
         }
         this.renderCamera = function(camera){ renderCameraOnly(this, camera); };
         this.renderFlatCamera = function(camera, options){ return renderFlatCameraOnly(this, camera, options); };
+        this.renderFlat = function(scene, camera, options){ if (scene.autoUpdate===true) scene.updateMatrixWorld(); if (renderFlatCameraOnly(this, camera, options)!==true) return false; renderObject(scene, scene, camera, null); return true; };
         this.render = function(scene, camera){ if (scene.autoUpdate===true) scene.updateMatrixWorld(); var cameraCSSMatrix=renderCameraOnly(this, camera); renderObject(scene, scene, camera, cameraCSSMatrix); };
     }
 

package/wwwroot/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -7,11 +7,11 @@
     <title>MindExec | Business Execution OS for solo builders</title>
     <meta name="description" content="MindExec is an AI business execution OS for solo builders who want to turn notes, research, assets, and repeatable execution Skills into revenue-producing work." />
     <base href="/" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260620-css3d-flat-wheel-v733" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260620-css3d-flat-wheel-v733" />
-    <!-- ?�▼??Font Awesome (local) ?�▼??-->
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260620-css3d-flat-pan-v750" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260620-css3d-flat-pan-v750" />
+    <!-- ?占썩뼹??Font Awesome (local) ?占썩뼹??-->
     <link rel="stylesheet" href="_content/MindExecution.Shared/lib/font-awesome/css/all.min.css" />
-    <!-- ?�▲??-->
+    <!-- ?占썩뼯??-->
     <style>
         #app {
             min-height: 100vh;
@@ -180,7 +180,7 @@
         function adjustTextareaHeight(element) {
             if (!element) return;
 
-            // ?�▼??[Change] Add jitter-prevention logic ?�▼??
+            // ?占썩뼹??[Change] Add jitter-prevention logic ?占썩뼹??
             // Compare the previous text length. When content grows, skip the 'auto' reset.
             // Only reset to 'auto' when shrinking (during deletion).
             const currentLength = element.value.length;
@@ -191,7 +191,7 @@
             }
 
             element.dataset.prevLength = currentLength; // store current length
-            // ?�▲??[Change] ?�▲??
+            // ?占썩뼯??[Change] ?占썩뼯??
 
             const computedStyles = window.getComputedStyle(element);
             const lineHeight = parseFloat(computedStyles.lineHeight || '24') || 24;
@@ -284,11 +284,11 @@
         // Prevent default page-level DnD behavior
         document.addEventListener('dragover', (e) => {
             e.preventDefault();
-            // ?�▼??[Change] Remove/avoid stopPropagation (do not disrupt event flow) ?�▼??
+            // ?占썩뼹??[Change] Remove/avoid stopPropagation (do not disrupt event flow) ?占썩뼹??
             // e.stopPropagation(); 
-            // ?�▲??[Change] ?�▲??
+            // ?占썩뼯??[Change] ?占썩뼯??
 
-            // ?�▼??[Change] Default is 'none', but only apply when not handled by children ?�▼??
+            // ?占썩뼹??[Change] Default is 'none', but only apply when not handled by children ?占썩뼹??
             // (If MindMapDnD handles it, this code won't run or will be ignored)
             // e.dataTransfer.dropEffect = 'none'; 
         }, false);
@@ -428,7 +428,7 @@
             window.__matchesMarketingToolHost(host, location.host || '')
         );
     </script>
-    <!-- ?�▼??[Upgrade] Three.js r168 via ESM ?�▼??-->
+    <!-- ?占썩뼹??[Upgrade] Three.js r168 via ESM ?占썩뼹??-->
     <script type="importmap">
     {
         "imports": {
@@ -579,7 +579,7 @@
             }
 
             const base = '_content/MindExecution.Shared/js/';
-        const scriptVersion = '20260620-css3d-flat-wheel-v733';
+        const scriptVersion = '20260620-css3d-flat-pan-v750';
             const scriptUrl = (script) => `${base}${script}?v=${scriptVersion}`;
             console.log(`[Script Loader] Shared JS version: ${scriptVersion}`);
             const criticalScripts = [
@@ -590,7 +590,7 @@
                 'background-themes.js',
                 'mind-map-logic-workers.js',
                 // Troika removed
-                'texture-worker-manager.js',  // ??Web Worker ?�스�??�성
+                'texture-worker-manager.js',  // ??Web Worker ?占쎌뒪占??占쎌꽦
                 'mind-map-texture-factory.js',
                 'mind-map-glow-shader.js',  // ??SDF Glow (no textures, GPU only)
                 'mind-map-css3d-manager.js',
@@ -603,7 +603,7 @@
                 'mind-map-interactions.js',
                 'mind-map-dnd.js',
                 'mind-map-lod-renderer.js',
-                'mind-map-text-lod-system.js',  // ??Text LOD ?�스??(?�적 ?�스�??�질)
+                'mind-map-text-lod-system.js',  // ??Text LOD ?占쎌뒪??(?占쎌쟻 ?占쎌뒪占??占쎌쭏)
                 'mind-map-core.js',
                 'mindmap-toolbar.js',
                 'token-manager.js',
@@ -722,7 +722,7 @@
             window.showBlazorBootError('The page could not finish loading. Reload and try again.');
         });
     </script>
-    <!-- ?�▲??[Upgrade] ?�▲??-->
+    <!-- ?占썩뼯??[Upgrade] ?占썩뼯??-->
 </body>
 
 </html>
@@ -732,3 +732,5 @@
 
 
 
+
+

package/wwwroot/service-worker-assets.js

@@ -1,5 +1,5 @@
 self.assetsManifest = {
-    "version":  "++e3HCEL",
+    "version":  "Mc/DXRDi",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -42,7 +42,7 @@
                        "url":  "_content/MindExecution.Shared/css/app.css"
                    },
                    {
-                       "hash":  "sha256-IsoaitVgDvGMpqVgxyFAW22yVRgrOb0iXaxNi3Sa6s4=",
+                       "hash":  "sha256-zsNb+3FjEoGDJ9DgMdmdUDcqtZZutCCxWLOD11C0c00=",
                        "url":  "_content/MindExecution.Shared/css/mind-map-overrides.css"
                    },
                    {
@@ -78,7 +78,7 @@
                        "url":  "_content/MindExecution.Shared/js/marked.min.js"
                    },
                    {
-                       "hash":  "sha256-bABeX8wANAaPRLG1o7ZxQkUkfqWUzChfMUTxUgLiyAA=",
+                       "hash":  "sha256-I3V3gWKzxo7MOYoHmrw4xLebf6DAoBDbOKyi/Yf1ygg=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js"
                    },
                    {
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-apogDKTIevZkwck7bwJk6IdZUOmdroyMFIXuT/Lu7M0=",
+                       "hash":  "sha256-EhlES5jLPO7cMczX09TDrcP1PC/KgkF86AYsA+Oap4I=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -106,7 +106,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-glow-shader.js"
                    },
                    {
-                       "hash":  "sha256-AmkV3no3WRkpMZ4GO+XHpIMuWgixgiTmZjuR1FpgTA8=",
+                       "hash":  "sha256-zEddte5cBTtErNAKwTTpVx4/HQVQpkkF460AYsYe/28=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-interactions.js"
                    },
                    {
@@ -114,7 +114,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-lod-plan-worker.js"
                    },
                    {
-                       "hash":  "sha256-GV55pbSXnKE79f7Fvjh995B6wrzgPmh6BUWD26/RlCA=",
+                       "hash":  "sha256-xlxha7eUDEjfMacqCq0ovCZPd3+Nxyj1MPdVt8iNNDM=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-lod-renderer.js"
                    },
                    {
@@ -182,7 +182,7 @@
                        "url":  "_content/MindExecution.Shared/js/plan-master.js"
                    },
                    {
-                       "hash":  "sha256-C7LU7nkx5+E0CFEAx0GNaL5EaiG8g8Cvg5QtDaWTuyo=",
+                       "hash":  "sha256-uNsEEhPWF3LWiI7eGK5Fft6Rw/XSu+PrxGcu5ZcK1MA=",
                        "url":  "_content/MindExecution.Shared/js/renderers/CSS3DRenderer.js"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-f4OkG0Hf42cuV7+AZwsQiqZTLsxdeJjkvo1cJbRNTMs=",
+                       "hash":  "sha256-Ob3HKDlRurLtR1gJlYEo/2kPD1z2E+ymjO49AfrDA+M=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

@@ -1,4 +1,4 @@
-/* Manifest version: ++e3HCEL */
+/* Manifest version: Mc/DXRDi */
 // Hosted deployments should prefer the network over stale offline caches.
 // This service worker immediately clears old Blazor offline caches and unregisters itself.