@mindexec/cli 0.2.230 → 0.2.231

package/package.json

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

package/wwwroot/_content/MindExecution.Shared/js/background-themes.js

@@ -14,9 +14,9 @@
         Continuous: 'continuous'
     });
     const THEME_ANIMATION_MODE_BY_NAME = Object.freeze({
-        SpatialGrid2D: THEME_ANIMATION_MODE.Camera,
-        GridPlane: THEME_ANIMATION_MODE.Camera,
-        XYGrid: THEME_ANIMATION_MODE.Camera,
+        SpatialGrid2D: THEME_ANIMATION_MODE.None,
+        GridPlane: THEME_ANIMATION_MODE.None,
+        XYGrid: THEME_ANIMATION_MODE.None,
         SpinningBoxes: THEME_ANIMATION_MODE.Continuous,
         Space3D: THEME_ANIMATION_MODE.Continuous,
         SpiritFlow: THEME_ANIMATION_MODE.Continuous,
@@ -230,6 +230,15 @@
             ...options
         };
 
+        if (settings.localCssOnly === true) {
+            overlayGroup.visible = false;
+            overlayGroup.userData.lightweightAdaptiveGrid = true;
+            overlayGroup.userData.localSnapGrid = true;
+            overlayGroup.userData.localSnapGridStyle = settings.localSnapGridStyle || 'line';
+            overlayGroup.animate = () => { };
+            return setThemeAnimationMode(overlayGroup, THEME_ANIMATION_MODE.None);
+        }
+
         const grids = [
             {
                 key: 'fine',
@@ -320,6 +329,8 @@
             create: (scene) => {
                 scene.background = new THREE.Color(THEME_SURFACE_BG);
                 const grid = createAdaptiveXYGridOverlay(new THREE.Color(THEME_GRID_COLOR_SOFT), {
+                    localCssOnly: true,
+                    localSnapGridStyle: 'dot',
                     fineDistance: 42000,
                     coarseDistance: 120000,
                     farDistance: 320000,
@@ -337,34 +348,19 @@
             dispose: (themeObject) => { disposeThemeObject(themeObject); }
         },
 
-        // Theme 3: GridPlane (basic 2D grid - uses InfiniteGridHelper)
-        'GridPlane': {
-            create: (scene) => {
+        // Theme 3: GridPlane (basic 2D grid - rendered by the local CSS snap grid)
+        'GridPlane': {
+            create: (scene) => {
                 scene.background = new THREE.Color(THEME_PLAIN_BG);
-                const gridHelper = new window.InfiniteGridHelper(
-                    10, // size1 (small cells)
-                    100, // size2 (large cells)
-                    new THREE.Color(THEME_GRID_COLOR),
-                    50000, // Distance
-                    'xzy' // XZ plane
-                );
-                // ▼▼▼ [Change] Snap from 10 to 100 (align to large grid centers) ▼▼▼
-                const tmp = new THREE.Vector3();
-                const snap = 100; // size2 (large grid)
-                gridHelper.animate = (camera) => {
-                    if (!camera) return;
-                    tmp.copy(camera.position);
-                    // axes = 'xzy' (XZ plane; Y is height)
-                    tmp.y = -10; // Keep Y fixed below 0 (XZ plane)
-                    tmp.x = Math.round(tmp.x / snap) * snap;
-                    tmp.z = Math.round(tmp.z / snap) * snap;
-                    gridHelper.position.copy(tmp);
-                };
-                // ▲▲▲ [Change] ▲▲▲
-                return setThemeAnimationMode(gridHelper, THEME_ANIMATION_MODE.Camera);
+                const grid = createAdaptiveXYGridOverlay(new THREE.Color(THEME_GRID_COLOR), {
+                    localCssOnly: true,
+                    localSnapGridStyle: 'line'
+                });
+                grid.userData.themeAlias = 'GridPlane';
+                return grid;
             },
-            dispose: (themeObject) => { disposeThemeObject(themeObject); }
-        },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
 
         // Theme 4: SpinningBoxes (reuses 3d-model-viewer logic)
         'SpinningBoxes': {
@@ -491,6 +487,8 @@
             create: (scene) => {
                 scene.background = new THREE.Color(THEME_PLAIN_BG);
                 return createAdaptiveXYGridOverlay(new THREE.Color(THEME_GRID_COLOR), {
+                    localCssOnly: true,
+                    localSnapGridStyle: 'line',
                     fineDistance: 45000,
                     coarseDistance: 120000,
                     farDistance: 320000,

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-ua-motion-hidden-work-v677';
+    const MINDMAP_CORE_BUILD_ID = '20260620-local-snap-grid-v678';
     const CanvasPhase = Object.freeze({
         Booting: 'booting',
         BoardFileLoading: 'board-file-loading',
@@ -103,6 +103,10 @@
     const CAMERA_MOTION_GRID_OVERSCAN_PX = 512;
     const CAMERA_MOTION_GRID_Z_BUCKET_WORLD = 80;
     const CAMERA_MOTION_GRID_FALLBACK_ENABLED = false;
+    const LOCAL_SNAP_GRID_RADIUS_PX = 500;
+    const LOCAL_SNAP_GRID_DIAMETER_PX = LOCAL_SNAP_GRID_RADIUS_PX * 2;
+    const LOCAL_SNAP_GRID_MIN_STEP_PX = 8;
+    const LOCAL_SNAP_GRID_MAX_STEP_PX = 56;
     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;
@@ -1435,6 +1439,7 @@
         }
 
         module._syncMotionGridLayerForCameraNavigation?.(usedWebglCanvasCameraTransform);
+        module._syncLocalSnapGridLayer?.(true);
         module.cssRenderer.renderCamera(module.camera);
 
         syncBusinessAutomationEdgesForCameraNavigation(module);
@@ -1654,6 +1659,7 @@
         }
 
         module._syncMotionGridLayerForCameraNavigation?.(usedWebglCanvasCameraTransform);
+        module._syncLocalSnapGridLayer?.(true);
         if (canRenderCss3dCamera === true) {
             module.cssRenderer.renderCamera(module.camera);
         }
@@ -3594,6 +3600,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this._motionGridVisible = false;
             this._motionGridHideTimer = null;
             this._lastMotionGridKey = '';
+            this._localSnapGridLayer = null;
+            this._localSnapGridVisible = false;
+            this._lastLocalSnapGridKey = '';
+            this._lastLocalSnapGridTransformKey = '';
+            this._lastSnapGridClientX = null;
+            this._lastSnapGridClientY = null;
             this._animationIdleTimerId = null;
             this._animationLoopCallback = null;
             this._animationLoopExecuting = false;
@@ -3643,6 +3655,208 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 themeName === 'SpinningBoxes';
         }
 
+        _isLocalSnapGridThemeEnabled() {
+            const themeName = String(this.currentThemeName || '').trim();
+            return themeName === 'SpatialGrid2D' ||
+                themeName === 'XYGrid' ||
+                themeName === 'GridPlane';
+        }
+
+        setLocalSnapGridClientPoint(clientX, clientY) {
+            const nextX = Number(clientX);
+            const nextY = Number(clientY);
+            if (!Number.isFinite(nextX) || !Number.isFinite(nextY)) {
+                return false;
+            }
+
+            const roundedX = Math.round(nextX * 2) / 2;
+            const roundedY = Math.round(nextY * 2) / 2;
+            if (this._lastSnapGridClientX === roundedX &&
+                this._lastSnapGridClientY === roundedY) {
+                return false;
+            }
+
+            this._lastSnapGridClientX = roundedX;
+            this._lastSnapGridClientY = roundedY;
+            this._lastLocalSnapGridTransformKey = '';
+            return true;
+        }
+
+        _ensureLocalSnapGridLayer() {
+            if (!this.container || typeof document === 'undefined') {
+                return null;
+            }
+            if (this._localSnapGridLayer?.isConnected) {
+                return this._localSnapGridLayer;
+            }
+
+            const layer = document.createElement('div');
+            layer.className = 'mindcanvas-local-snap-grid-layer';
+            layer.setAttribute('aria-hidden', 'true');
+            layer.style.position = 'absolute';
+            layer.style.left = '0';
+            layer.style.top = '0';
+            layer.style.width = `${LOCAL_SNAP_GRID_DIAMETER_PX}px`;
+            layer.style.height = `${LOCAL_SNAP_GRID_DIAMETER_PX}px`;
+            layer.style.zIndex = '0';
+            layer.style.pointerEvents = 'none';
+            layer.style.display = 'none';
+            layer.style.opacity = '0';
+            layer.style.backgroundRepeat = 'repeat';
+            layer.style.backgroundColor = 'transparent';
+            layer.style.borderRadius = '50%';
+            layer.style.contain = 'strict';
+            layer.style.willChange = 'transform, opacity';
+            layer.style.transform = 'translate3d(0, 0, 0)';
+            layer.style.transition = 'opacity 90ms linear';
+            const mask = 'radial-gradient(circle at center, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.86) 48%, rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.08) 88%, transparent 100%)';
+            layer.style.maskImage = mask;
+            layer.style.webkitMaskImage = mask;
+
+            const cssElement = this.cssRenderer?.domElement;
+            if (cssElement?.parentNode === this.container) {
+                this.container.insertBefore(layer, cssElement);
+            } else {
+                this.container.appendChild(layer);
+            }
+
+            this._localSnapGridLayer = layer;
+            this._lastLocalSnapGridKey = '';
+            this._lastLocalSnapGridTransformKey = '';
+            return layer;
+        }
+
+        _setLocalSnapGridVisible(visible) {
+            const layer = this._localSnapGridLayer;
+            if (!layer) {
+                return;
+            }
+
+            if (visible === true) {
+                if (this._localSnapGridVisible !== true) {
+                    this._localSnapGridVisible = true;
+                    if (layer.style.display !== 'block') {
+                        layer.style.display = 'block';
+                    }
+                }
+                if (layer.style.opacity !== '1') {
+                    layer.style.opacity = '1';
+                }
+                return;
+            }
+
+            if (this._localSnapGridVisible !== true && layer.style.display === 'none') {
+                return;
+            }
+
+            this._localSnapGridVisible = false;
+            if (layer.style.opacity !== '0') {
+                layer.style.opacity = '0';
+            }
+            if (layer.style.display !== 'none') {
+                layer.style.display = 'none';
+            }
+        }
+
+        _syncLocalSnapGridLayer(visible = true) {
+            if (visible !== true || !this._isLocalSnapGridThemeEnabled()) {
+                this._setLocalSnapGridVisible(false);
+                return false;
+            }
+
+            if (!this.container || !this.camera?.isPerspectiveCamera) {
+                this._setLocalSnapGridVisible(false);
+                return false;
+            }
+
+            const layer = this._ensureLocalSnapGridLayer();
+            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 left = Number(viewportMetrics.left || 0);
+            const top = Number(viewportMetrics.top || 0);
+            const hasPointer =
+                Number.isFinite(Number(this._lastSnapGridClientX)) &&
+                Number.isFinite(Number(this._lastSnapGridClientY));
+            const centerX = hasPointer
+                ? Math.max(0, Math.min(width, Number(this._lastSnapGridClientX) - left))
+                : width / 2;
+            const centerY = hasPointer
+                ? Math.max(0, Math.min(height, Number(this._lastSnapGridClientY) - top))
+                : height / 2;
+            const layerLeft = centerX - LOCAL_SNAP_GRID_RADIUS_PX;
+            const layerTop = centerY - LOCAL_SNAP_GRID_RADIUS_PX;
+
+            const camera = this.camera;
+            const cameraZ = Math.max(1, Number(camera.position?.z || 1));
+            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(
+                LOCAL_SNAP_GRID_MIN_STEP_PX,
+                Math.min(LOCAL_SNAP_GRID_MAX_STEP_PX, worldGrid * pxPerWorld)
+            );
+            const majorStepPx = smallStepPx * 10;
+            const originX = width / 2 - Number(camera.position?.x || 0) * pxPerWorld;
+            const originY = height / 2 + Number(camera.position?.y || 0) * pxPerWorld;
+            const positiveModulo = (value, size) => ((value % size) + size) % size;
+            const smallOffsetX = positiveModulo(originX - layerLeft, smallStepPx);
+            const smallOffsetY = positiveModulo(originY - layerTop, smallStepPx);
+            const majorOffsetX = positiveModulo(originX - layerLeft, majorStepPx);
+            const majorOffsetY = positiveModulo(originY - layerTop, majorStepPx);
+            const themeName = String(this.currentThemeName || '').trim();
+            const styleKind = themeName === 'SpatialGrid2D' ? 'dot' : 'line';
+            const opacity = Math.max(0.34, Math.min(0.82, cameraZ <= 1800 ? 0.72 : 0.72 - ((cameraZ - 1800) / 36000)));
+            const localGridKey = [
+                styleKind,
+                Math.round(smallStepPx * 100),
+                Math.round(majorStepPx * 100),
+                Math.round(smallOffsetX * 100),
+                Math.round(smallOffsetY * 100),
+                Math.round(majorOffsetX * 100),
+                Math.round(majorOffsetY * 100),
+                Math.round(opacity * 100)
+            ].join('|');
+
+            if (localGridKey !== this._lastLocalSnapGridKey) {
+                this._lastLocalSnapGridKey = localGridKey;
+                if (styleKind === 'dot') {
+                    layer.style.backgroundImage = [
+                        'radial-gradient(circle at 0 0, rgba(68, 78, 94, 0.34) 1px, transparent 1.55px)',
+                        'radial-gradient(circle at 0 0, rgba(44, 55, 74, 0.5) 1.7px, transparent 2.2px)'
+                    ].join(', ');
+                } else {
+                    layer.style.backgroundImage = [
+                        'linear-gradient(to right, rgba(70, 82, 100, 0.22) 1px, transparent 1px)',
+                        'linear-gradient(to bottom, rgba(70, 82, 100, 0.22) 1px, transparent 1px)',
+                        'linear-gradient(to right, rgba(42, 55, 75, 0.36) 1px, transparent 1px)',
+                        'linear-gradient(to bottom, rgba(42, 55, 75, 0.36) 1px, transparent 1px)'
+                    ].join(', ');
+                }
+                layer.style.backgroundSize = styleKind === 'dot'
+                    ? `${smallStepPx.toFixed(3)}px ${smallStepPx.toFixed(3)}px, ${majorStepPx.toFixed(3)}px ${majorStepPx.toFixed(3)}px`
+                    : `${smallStepPx.toFixed(3)}px ${smallStepPx.toFixed(3)}px, ${smallStepPx.toFixed(3)}px ${smallStepPx.toFixed(3)}px, ${majorStepPx.toFixed(3)}px ${majorStepPx.toFixed(3)}px, ${majorStepPx.toFixed(3)}px ${majorStepPx.toFixed(3)}px`;
+                layer.style.backgroundPosition = styleKind === 'dot'
+                    ? `${smallOffsetX.toFixed(3)}px ${smallOffsetY.toFixed(3)}px, ${majorOffsetX.toFixed(3)}px ${majorOffsetY.toFixed(3)}px`
+                    : `${smallOffsetX.toFixed(3)}px 0, 0 ${smallOffsetY.toFixed(3)}px, ${majorOffsetX.toFixed(3)}px 0, 0 ${majorOffsetY.toFixed(3)}px`;
+                layer.style.opacity = opacity.toFixed(3);
+            }
+
+            const transformKey = `${Math.round(layerLeft * 2)}|${Math.round(layerTop * 2)}`;
+            if (transformKey !== this._lastLocalSnapGridTransformKey) {
+                this._lastLocalSnapGridTransformKey = transformKey;
+                layer.style.transform = `translate3d(${layerLeft.toFixed(2)}px, ${layerTop.toFixed(2)}px, 0)`;
+            }
+
+            this._setLocalSnapGridVisible(true);
+            return true;
+        }
+
         _ensureMotionGridLayer() {
             if (!this.container) {
                 return null;
@@ -4497,6 +4711,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 if (this.scene) this.scene.remove(this.currentThemeObject);
             }
             this._syncMotionGridLayer(false);
+            this._syncLocalSnapGridLayer(false);
             this.currentThemeObject = newTheme.create(this.scene, this.renderer);
             if (this.currentThemeObject) this.scene.add(this.currentThemeObject);
             this.currentThemeName = themeName;
@@ -7515,6 +7730,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     isCameraNavigationOnlyInteractiveFrame === true) {
                     this._syncMotionGridLayerForCameraNavigation(usedWebglCanvasCameraTransform);
                 }
+                this._syncLocalSnapGridLayer(true);
                 if (shouldRenderWebglFrame === true &&
                     this._motionGridVisible === true &&
                     isPureCss3dCameraMotionFrame !== true &&
@@ -8197,6 +8413,13 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 this._lastMotionGridKey = '';
                 this._lastMotionGridTransformKey = '';
             }
+            if (this._localSnapGridLayer) {
+                this._localSnapGridLayer.remove();
+                this._localSnapGridLayer = null;
+                this._localSnapGridVisible = false;
+                this._lastLocalSnapGridKey = '';
+                this._lastLocalSnapGridTransformKey = '';
+            }
             removeCursorDomElement(this);
             if (this._viewStatePersistTimer) {
                 clearTimeout(this._viewStatePersistTimer);

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

@@ -1461,6 +1461,11 @@ window.MindMapInteractions = (function () {
     function setPointerFromClientPosition(module, clientX, clientY) {
         if (!module?.pointer) return false;
 
+        const localSnapGridMoved = module.setLocalSnapGridClientPoint?.(clientX, clientY) === true;
+        if (localSnapGridMoved && module._isLocalSnapGridThemeEnabled?.() === true) {
+            module.requestAnimationWake?.('local-snap-grid-pointer');
+        }
+
         const metrics = getCachedViewportMetrics(module);
         if (!metrics || metrics.width <= 0 || metrics.height <= 0) {
             return false;
@@ -6324,6 +6329,7 @@ window.MindMapInteractions = (function () {
             return;
         }
         // ▲▲▲ [Fix] ▲▲▲
+        module.setLocalSnapGridClientPoint?.(clientX, clientY);
 
         let t0 = 0;
         let cameraZ = '?';

package/wwwroot/index.html

@@ -7,8 +7,8 @@
     <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-ua-motion-hidden-work-v677" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260620-ua-motion-hidden-work-v677" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260620-local-snap-grid-v678" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260620-local-snap-grid-v678" />
     <!-- ?占썩뼹??Font Awesome (local) ?占썩뼹??-->
     <link rel="stylesheet" href="_content/MindExecution.Shared/lib/font-awesome/css/all.min.css" />
     <!-- ?占썩뼯??-->
@@ -579,7 +579,7 @@
             }
 
             const base = '_content/MindExecution.Shared/js/';
-        const scriptVersion = '20260620-ua-motion-hidden-work-v677';
+        const scriptVersion = '20260620-local-snap-grid-v678';
             const scriptUrl = (script) => `${base}${script}?v=${scriptVersion}`;
             console.log(`[Script Loader] Shared JS version: ${scriptVersion}`);
             const criticalScripts = [

package/wwwroot/service-worker-assets.js

@@ -1,5 +1,5 @@
 self.assetsManifest = {
-    "version":  "5Vd1nTPi",
+    "version":  "0fNd45RW",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -58,7 +58,7 @@
                        "url":  "_content/MindExecution.Shared/js/agent-visualization.js"
                    },
                    {
-                       "hash":  "sha256-bOfs8eV2z6RtqE9K4nSKswZN/k5zwiTbDsuOerw64zQ=",
+                       "hash":  "sha256-esAVUETb0T9V8y/I4Ub8UpN2trCCyTgunOGhh/cTyfQ=",
                        "url":  "_content/MindExecution.Shared/js/background-themes.js"
                    },
                    {
@@ -78,7 +78,7 @@
                        "url":  "_content/MindExecution.Shared/js/marked.min.js"
                    },
                    {
-                       "hash":  "sha256-yIEJj1tPLgkRYWwNrycz2AcV4vSQXhwb9rJ/qQ70jog=",
+                       "hash":  "sha256-cgRnT3AuM8Mw82hw1iBUqvEjFE3RPDTdFRA0hTl2MRw=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js"
                    },
                    {
@@ -106,7 +106,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-glow-shader.js"
                    },
                    {
-                       "hash":  "sha256-DRf0M6UHfWaiQmYsfjt1EO8WyhrGgOLttseOJWU5/wk=",
+                       "hash":  "sha256-c4m1kyotX9806YeHVrbh0M3lvEmn9kO8oyhZY8lD28M=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-interactions.js"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-z437FBpFk/zJM86oW7nkpoZvyDflIp1D1DZGZlgeETI=",
+                       "hash":  "sha256-CkeAh51//UYmSeCRJEi3nfSHsdn1/1M6oxHS4TrYXss=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

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