@mindexec/cli 0.2.458 → 0.2.460

package/wwwroot/_content/MindExecution.Shared/js/mind-map-animated-image-preview.js

@@ -0,0 +1,270 @@
+// Bounded resident previews for animation-capable image formats.
+(function () {
+    'use strict';
+
+    function normalizeAssetUrl(url) {
+        if (typeof url !== 'string') return '';
+        return url.trim()
+            .replace(/^http:\/\/localhost(?=:\d+\/assets\/)/i, 'http://127.0.0.1')
+            .replace(/^http:\/\/\[::1\](?=:\d+\/assets\/)/i, 'http://127.0.0.1');
+    }
+
+    function getContentType(model) {
+        return String(model?.contentType || model?.ContentType || '').trim().toLowerCase();
+    }
+
+    function getMetadata(model) {
+        return model?.metadata || model?.Metadata || {};
+    }
+
+    function getMetadataValue(metadata, ...keys) {
+        for (const key of keys) {
+            const direct = metadata?.[key];
+            if (direct !== undefined && direct !== null && String(direct).trim()) {
+                return String(direct).trim();
+            }
+        }
+
+        const wanted = new Set(keys.map(key => String(key).toLowerCase()));
+        for (const [key, value] of Object.entries(metadata || {})) {
+            if (wanted.has(String(key).toLowerCase()) && value !== undefined && value !== null && String(value).trim()) {
+                return String(value).trim();
+            }
+        }
+
+        return '';
+    }
+
+    function hasExtension(url, extension) {
+        const pathname = normalizeAssetUrl(url).split(/[?#]/)[0].toLowerCase();
+        return !!pathname && pathname.endsWith(extension);
+    }
+
+    function getImageReferenceCandidates(model) {
+        const metadata = getMetadata(model);
+        return [
+            model?.response,
+            model?.Response,
+            metadata?.OriginalPath,
+            metadata?.OriginalUrl,
+            metadata?.originalUrl,
+            metadata?.ImageUrl,
+            metadata?.imageUrl
+        ];
+    }
+
+    function isAnimatedGifImageModel(model) {
+        if (!model || getContentType(model) !== 'image') return false;
+        const metadata = getMetadata(model);
+        const mimeType = getMetadataValue(metadata, 'fileMime', 'FileMime', 'mimeType', 'MimeType').toLowerCase();
+        return mimeType === 'image/gif' || getImageReferenceCandidates(model).some(url => hasExtension(url, '.gif'));
+    }
+
+    function isWebpImageModel(model) {
+        if (!model || getContentType(model) !== 'image') return false;
+        const metadata = getMetadata(model);
+        const mimeType = getMetadataValue(metadata, 'fileMime', 'FileMime', 'mimeType', 'MimeType').toLowerCase();
+        return mimeType === 'image/webp' || getImageReferenceCandidates(model).some(url => hasExtension(url, '.webp'));
+    }
+
+    function isSafeResidentStaticPreviewUrl(url) {
+        const normalized = normalizeAssetUrl(url).toLowerCase();
+        return normalized.includes('/assets/thumbs/') &&
+            !hasExtension(normalized, '.gif') &&
+            !hasExtension(normalized, '.webp');
+    }
+
+    function getCanonicalAssetKey(url) {
+        const normalized = normalizeAssetUrl(url);
+        if (!normalized) return '';
+        const withoutQuery = normalized.split(/[?#]/)[0];
+        const lower = withoutQuery.toLowerCase();
+        for (const marker of ['/assets/thumbs/', '/assets/']) {
+            if (!lower.includes(marker)) continue;
+            const assetName = withoutQuery.slice(lower.lastIndexOf(marker) + marker.length).split('/').pop() || '';
+            const dotIndex = assetName.lastIndexOf('.');
+            return (dotIndex > 0 ? assetName.slice(0, dotIndex) : assetName).toLowerCase();
+        }
+        return withoutQuery.toLowerCase();
+    }
+
+    function areAssetUrlsEquivalent(leftUrl, rightUrl) {
+        const leftKey = getCanonicalAssetKey(leftUrl);
+        const rightKey = getCanonicalAssetKey(rightUrl);
+        return leftKey && rightKey
+            ? leftKey === rightKey
+            : normalizeAssetUrl(leftUrl) === normalizeAssetUrl(rightUrl);
+    }
+
+    function getLocalWebpAssetFilename(...urls) {
+        for (const candidate of urls) {
+            const normalized = normalizeAssetUrl(candidate);
+            if (!normalized || !hasExtension(normalized, '.webp')) continue;
+
+            let pathname = normalized.split(/[?#]/)[0];
+            try {
+                pathname = new URL(normalized, window.location?.origin || 'http://127.0.0.1').pathname;
+            } catch { }
+
+            const normalizedPath = pathname.replace(/\\/g, '/');
+            if (!/(^|\/)assets\//i.test(normalizedPath)) continue;
+
+            const rawFilename = normalizedPath.split('/').pop() || '';
+            let filename = rawFilename;
+            try { filename = decodeURIComponent(rawFilename); } catch { }
+            if (/^[^/\\]+\.webp$/i.test(filename)) return filename;
+        }
+
+        return '';
+    }
+
+    function getBridgeOrigin() {
+        const configuredOrigin = String(window.MindExecLocalBridge?.activeBridgeUrl || '').trim();
+        return (configuredOrigin || window.location?.origin || 'http://127.0.0.1:5147').replace(/\/$/, '');
+    }
+
+    async function getBridgeAuthHeaders(bridgeOrigin) {
+        if (window.__mindExecutionBridgeAuthPromise) {
+            try { return await window.__mindExecutionBridgeAuthPromise; } catch { }
+        }
+
+        const authPromise = (async () => {
+            const nonce = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+            const response = await fetch(`${bridgeOrigin}/api/status?cb=${encodeURIComponent(nonce)}`, {
+                cache: 'no-store',
+                targetAddressSpace: 'loopback'
+            });
+            if (!response.ok) return {};
+            const status = await response.json();
+            const token = String(status?.bridgeToken || '').trim();
+            const header = String(status?.bridgeTokenHeader || 'X-Bridge-Token').trim();
+            return token && header ? { [header]: token } : {};
+        })();
+        window.__mindExecutionBridgeAuthPromise = authPromise;
+
+        try {
+            return await authPromise;
+        } catch {
+            if (window.__mindExecutionBridgeAuthPromise === authPromise) {
+                window.__mindExecutionBridgeAuthPromise = null;
+            }
+            return {};
+        }
+    }
+
+    async function resolveLocalWebpResidentPreview(item, assetUrls) {
+        const sourceUrl = normalizeAssetUrl(
+            item?.originalUrl ||
+            assetUrls?.fullResUrl ||
+            assetUrls?.originalUrl ||
+            assetUrls?.originalPath ||
+            item?.previewUrl || ''
+        );
+        const filename = getLocalWebpAssetFilename(
+            sourceUrl,
+            assetUrls?.originalPath,
+            assetUrls?.originalUrl,
+            item?.previewUrl
+        );
+        if (!filename || typeof fetch !== 'function') {
+            return { sourceUrl, previewUrl: '' };
+        }
+
+        const bridgeOrigin = getBridgeOrigin();
+        const headers = await getBridgeAuthHeaders(bridgeOrigin);
+        const endpoint = `${bridgeOrigin}/api/assets/generate-thumbnail/${encodeURIComponent(filename)}`;
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers,
+            cache: 'no-store',
+            targetAddressSpace: 'loopback'
+        });
+        if (!response.ok) {
+            throw new Error(`resident-static-preview-http-${response.status}`);
+        }
+
+        const payload = await response.json();
+        const previewUrl = normalizeAssetUrl(payload?.thumbnailUrl || '');
+        if (!isSafeResidentStaticPreviewUrl(previewUrl)) {
+            throw new Error('resident-static-preview-invalid-url');
+        }
+
+        return { sourceUrl, previewUrl };
+    }
+
+    function getResidentStaticPreviewUrl(renderer, nodeId, model, assetUrls) {
+        const normalizedNodeId = String(nodeId || '').trim();
+        const previewUrl = normalizeAssetUrl(assetUrls?.previewUrl || '');
+        if (!isWebpImageModel(model)) return previewUrl;
+
+        const sourceUrl = normalizeAssetUrl(
+            assetUrls?.fullResUrl || assetUrls?.originalUrl || assetUrls?.originalPath || previewUrl
+        );
+        const record = normalizedNodeId ? renderer?._residentStaticPreviewUrls?.get(normalizedNodeId) : null;
+        if (record?.sourceUrl === sourceUrl && isSafeResidentStaticPreviewUrl(record.previewUrl)) {
+            return normalizeAssetUrl(record.previewUrl);
+        }
+
+        if (normalizedNodeId && record) renderer._residentStaticPreviewUrls.delete(normalizedNodeId);
+        const existingThumbnailUrl = normalizeAssetUrl(assetUrls?.thumbnailUrl || '');
+        if (normalizedNodeId && sourceUrl && isSafeResidentStaticPreviewUrl(existingThumbnailUrl)) {
+            renderer._residentStaticPreviewUrls.set(normalizedNodeId, {
+                sourceUrl,
+                previewUrl: existingThumbnailUrl
+            });
+            return existingThumbnailUrl;
+        }
+
+        return '';
+    }
+
+    async function resolveSafeResidentPreviewUrl(renderer, item, assetUrls, getCurrentAssetUrls, onReady) {
+        if (!isWebpImageModel(item?.model)) {
+            return normalizeAssetUrl(item?.previewUrl || assetUrls?.previewUrl || '');
+        }
+
+        const nodeId = String(item?.nodeId || '').trim();
+        const existingPreviewUrl = getResidentStaticPreviewUrl(renderer, nodeId, item.model, {
+            ...assetUrls,
+            thumbnailUrl: item?.thumbnailUrl || assetUrls?.thumbnailUrl || ''
+        });
+        if (existingPreviewUrl) return existingPreviewUrl;
+
+        const resolved = await resolveLocalWebpResidentPreview(item, assetUrls);
+        const sourceUrl = normalizeAssetUrl(resolved?.sourceUrl || '');
+        const previewUrl = normalizeAssetUrl(resolved?.previewUrl || '');
+        if (!isSafeResidentStaticPreviewUrl(previewUrl)) return '';
+
+        if (
+            renderer?._disposed === true ||
+            item?.previewEpoch !== renderer?._residentStaticPreviewEpoch ||
+            renderer?.isInLODMode !== true
+        ) {
+            return '';
+        }
+
+        const currentEntry = renderer?._module?.nodeObjectsById?.get?.(nodeId) || null;
+        const currentAssetUrls = getCurrentAssetUrls?.(currentEntry?.model) || {};
+        const currentSourceUrl = normalizeAssetUrl(
+            currentAssetUrls?.fullResUrl ||
+            currentAssetUrls?.originalUrl ||
+            currentAssetUrls?.originalPath ||
+            currentAssetUrls?.previewUrl || ''
+        );
+        if (!currentEntry?.model || currentSourceUrl !== sourceUrl) return '';
+
+        renderer._residentStaticPreviewUrls.set(nodeId, { sourceUrl, previewUrl });
+        onReady?.({ nodeId, sourceKind: 'webp', previewUrl });
+        return previewUrl;
+    }
+
+    window.MindMapAnimatedImagePreview = Object.freeze({
+        normalizeAssetUrl,
+        isAnimatedGifImageModel,
+        isWebpImageModel,
+        isSafeResidentStaticPreviewUrl,
+        areAssetUrlsEquivalent,
+        getResidentStaticPreviewUrl,
+        resolveSafeResidentPreviewUrl
+    });
+})();

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

@@ -85,6 +85,8 @@
     const PASSIVE_OVERLAY_IDLE_DELAY_MS = 500;
     const PASSIVE_OVERLAY_PAN_IDLE_DELAY_MS = 500;
     const CURSOR_DOM_BLINK_DURATION_MS = 1000;
+    const CURSOR_WORLD_SIZE = 20;
+    const CURSOR_WORLD_THICKNESS = 4;
     const RENDER_DEBUG_METRICS_CACHE_MS = 250;
     const ANIMATION_IDLE_LOW_FPS_DELAY_MS = 500;
     const WHEEL_ZOOM_BURST_QUIET_FRAME_LIMIT = 12;
@@ -108,13 +110,13 @@
     const LOCAL_SNAP_GRID_DIAMETER_PX = LOCAL_SNAP_GRID_RADIUS_PX * 2;
     const LOCAL_SNAP_GRID_FADE_PX = 100;
     const LOCAL_SNAP_GRID_SOLID_RADIUS_PX = LOCAL_SNAP_GRID_RADIUS_PX - LOCAL_SNAP_GRID_FADE_PX;
-    const LOCAL_SNAP_GRID_MIN_STEP_PX = 8;
-    const LOCAL_SNAP_GRID_MAX_STEP_PX = 56;
+    const LOCAL_SNAP_GRID_RASTER_MIN_STEP_PX = 0.5;
+    const LOCAL_SNAP_GRID_RASTER_MAX_PERIOD_PX = 2048;
     const LOCAL_SNAP_GRID_OPACITY_BUCKET = 0.04;
-    const LOCAL_SNAP_GRID_DEFAULT_STEP_PX = 24;
-    const LOCAL_SNAP_GRID_DEFAULT_MAJOR_STEP_PX = 240;
-    const LOCAL_SNAP_GRID_DEFAULT_OPACITY = 0.42;
-    const LOCAL_SNAP_GRID_TILE_OVERSCAN_PX = LOCAL_SNAP_GRID_MAX_STEP_PX * 10;
+    const LOCAL_SNAP_GRID_DEFAULT_STEP_PX = 10;
+    const LOCAL_SNAP_GRID_DEFAULT_MAJOR_STEP_PX = 100;
+    const LOCAL_SNAP_GRID_DEFAULT_OPACITY = 0.58;
+    const LOCAL_SNAP_GRID_TILE_OVERSCAN_PX = 560;
     const LOCAL_SNAP_GRID_COMPOSITOR_SCALE_MIN = 0.8;
     const LOCAL_SNAP_GRID_COMPOSITOR_SCALE_MAX = 1.5;
     const CAMERA_STATIONARY_INTERACTION_FRAME_DELAY_MS = 48;
@@ -289,11 +291,11 @@
     position: absolute;
     left: 0;
     top: 0;
-    width: 20px;
-    height: 20px;
+    width: ${CURSOR_WORLD_SIZE}px;
+    height: ${CURSOR_WORLD_SIZE}px;
     box-sizing: border-box;
-    border-top: 4px solid #000;
-    border-left: 4px solid #000;
+    border-top: ${CURSOR_WORLD_THICKNESS}px solid #000;
+    border-left: ${CURSOR_WORLD_THICKNESS}px solid #000;
     pointer-events: none;
     z-index: 2147483000;
     animation: mindMapCursorDomBlink ${CURSOR_DOM_BLINK_DURATION_MS}ms steps(1, end) infinite;
@@ -347,8 +349,11 @@
         const ndcY = ((cursor.y - camera.position.y) * 2) / viewHeight;
         const x = ((ndcX + 1) / 2) * width;
         const y = ((1 - ndcY) / 2) * height;
+        const pxPerWorld = height / Math.max(1, viewHeight);
+        const cursorSizePx = Math.max(0.5, CURSOR_WORLD_SIZE * pxPerWorld);
+        const cursorThicknessPx = Math.max(0.5, CURSOR_WORLD_THICKNESS * pxPerWorld);
         const visible = ndcX >= -1.1 && ndcX <= 1.1 && ndcY >= -1.1 && ndcY <= 1.1;
-        const positionKey = `${visible ? 1 : 0}|${Math.round(x)}|${Math.round(y)}|${width}|${height}`;
+        const positionKey = `${visible ? 1 : 0}|${Math.round(x)}|${Math.round(y)}|${cursorSizePx.toFixed(2)}|${cursorThicknessPx.toFixed(2)}|${width}|${height}`;
 
         if (positionKey === module._lastCursorDomPositionKey) {
             return false;
@@ -360,6 +365,10 @@
             element.style.display = visible ? 'block' : 'none';
         }
         if (visible) {
+            element.style.width = `${cursorSizePx.toFixed(2)}px`;
+            element.style.height = `${cursorSizePx.toFixed(2)}px`;
+            element.style.borderTopWidth = `${cursorThicknessPx.toFixed(2)}px`;
+            element.style.borderLeftWidth = `${cursorThicknessPx.toFixed(2)}px`;
             element.style.transform = `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0)`;
         }
         return true;
@@ -3669,23 +3678,8 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
         _resolveLocalSnapGridWorldStep(pxPerWorld) {
             const safePxPerWorld = Math.max(Number.EPSILON, Number(pxPerWorld) || Number.EPSILON);
             const baseWorldStep = Math.max(Number.EPSILON, Number(this.GRID_SIZE || 10));
-            let worldStep = Math.max(
-                Number.EPSILON,
-                Number(this._lastLocalSnapGridWorldStep || baseWorldStep)
-            );
-            let smallStepPx = worldStep * safePxPerWorld;
-            let guard = 0;
-
-            while (smallStepPx < LOCAL_SNAP_GRID_MIN_STEP_PX && guard < 24) {
-                worldStep *= 2;
-                smallStepPx *= 2;
-                guard += 1;
-            }
-            while (smallStepPx > LOCAL_SNAP_GRID_MAX_STEP_PX && guard < 48) {
-                worldStep /= 2;
-                smallStepPx /= 2;
-                guard += 1;
-            }
+            const worldStep = baseWorldStep;
+            const smallStepPx = worldStep * safePxPerWorld;
 
             return {
                 worldStep,
@@ -3709,37 +3703,43 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 return false;
             }
 
-            const smallStep = Math.max(LOCAL_SNAP_GRID_MIN_STEP_PX, Number(smallStepPx) || LOCAL_SNAP_GRID_DEFAULT_STEP_PX);
+            const smallStep = Math.max(LOCAL_SNAP_GRID_RASTER_MIN_STEP_PX, Number(smallStepPx) || LOCAL_SNAP_GRID_DEFAULT_STEP_PX);
             const majorStep = Math.max(
                 smallStep,
                 Math.min(
-                    LOCAL_SNAP_GRID_TILE_OVERSCAN_PX,
+                    LOCAL_SNAP_GRID_RASTER_MAX_PERIOD_PX,
                     Number(majorStepPx) || LOCAL_SNAP_GRID_DEFAULT_MAJOR_STEP_PX
                 )
             );
-            const tileSize = Math.max(1, Math.round(majorStep));
-            if (canvas.width !== tileSize) {
-                canvas.width = tileSize;
+            const tileSize = Math.max(1, majorStep);
+            const viewportDpr = Math.max(1, Math.min(3, Number(this._lastViewportDpr || window.devicePixelRatio || 1)));
+            const bitmapSize = Math.max(1, Math.ceil(tileSize * viewportDpr));
+            if (canvas.width !== bitmapSize) {
+                canvas.width = bitmapSize;
             }
-            if (canvas.height !== tileSize) {
-                canvas.height = tileSize;
+            if (canvas.height !== bitmapSize) {
+                canvas.height = bitmapSize;
             }
+            const rasterScale = bitmapSize / tileSize;
+            ctx.setTransform(rasterScale, 0, 0, rasterScale, 0, 0);
             ctx.clearRect(0, 0, tileSize, tileSize);
 
             if (styleKind === 'dot') {
-                ctx.fillStyle = 'rgba(58, 69, 88, 0.46)';
-                const dotRadius = 1.15;
-                for (let y = 0; y < tileSize; y += smallStep) {
-                    for (let x = 0; x < tileSize; x += smallStep) {
-                        ctx.beginPath();
-                        ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
-                        ctx.fill();
+                if (smallStep >= 2.25) {
+                    ctx.fillStyle = 'rgba(58, 69, 88, 0.68)';
+                    const dotRadius = 1.2;
+                    for (let y = 0; y < tileSize; y += smallStep) {
+                        for (let x = 0; x < tileSize; x += smallStep) {
+                            ctx.beginPath();
+                            ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
+                            ctx.fill();
+                        }
                     }
                 }
 
-                ctx.fillStyle = 'rgba(15, 23, 42, 0.62)';
+                ctx.fillStyle = 'rgba(15, 23, 42, 0.82)';
                 ctx.beginPath();
-                ctx.arc(0, 0, 1.85, 0, Math.PI * 2);
+                ctx.arc(0, 0, 1.9, 0, Math.PI * 2);
                 ctx.fill();
             } else {
                 const drawLines = (step, color, width) => {
@@ -3779,17 +3779,17 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             const safeStyleKind = styleKind === 'dot' ? 'dot' : 'line';
             const safeSmallStep = Math.max(
-                LOCAL_SNAP_GRID_MIN_STEP_PX,
-                Math.min(LOCAL_SNAP_GRID_MAX_STEP_PX, Number(smallStepPx) || LOCAL_SNAP_GRID_DEFAULT_STEP_PX)
+                LOCAL_SNAP_GRID_RASTER_MIN_STEP_PX,
+                Number(smallStepPx) || LOCAL_SNAP_GRID_DEFAULT_STEP_PX
             );
             const safeMajorStep = Math.max(
                 safeSmallStep,
                 Math.min(
-                    LOCAL_SNAP_GRID_TILE_OVERSCAN_PX,
+                    LOCAL_SNAP_GRID_RASTER_MAX_PERIOD_PX,
                     Number(majorStepPx) || LOCAL_SNAP_GRID_DEFAULT_MAJOR_STEP_PX
                 )
             );
-            const safeOpacity = Math.max(0.2, Math.min(0.56, Number(opacity) || LOCAL_SNAP_GRID_DEFAULT_OPACITY));
+            const safeOpacity = Math.max(0.28, Math.min(0.68, Number(opacity) || LOCAL_SNAP_GRID_DEFAULT_OPACITY));
             const localGridKey = [
                 keyPrefix,
                 safeStyleKind,
@@ -3797,13 +3797,21 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 Math.round(safeMajorStep * 100),
                 Math.round(safeOpacity * 100)
             ].join('|');
-            const backgroundSizeKey = safeMajorStep.toFixed(3);
+            const smallStepValue = safeSmallStep.toFixed(3);
+            const majorStepValue = safeMajorStep.toFixed(3);
+            const showMinorDots = safeSmallStep >= 2.25;
+            const backgroundSizeValue = safeStyleKind === 'dot'
+                ? (showMinorDots
+                    ? `${majorStepValue}px ${majorStepValue}px, ${smallStepValue}px ${smallStepValue}px`
+                    : `${majorStepValue}px ${majorStepValue}px`)
+                : `${majorStepValue}px ${majorStepValue}px`;
+            const backgroundSizeKey = backgroundSizeValue;
 
             if (localGridKey === this._lastLocalSnapGridKey) {
                 this._localSnapGridRasterPeriodPx = safeMajorStep;
                 if (backgroundSizeKey !== this._lastLocalSnapGridBackgroundSizeKey) {
                     this._lastLocalSnapGridBackgroundSizeKey = backgroundSizeKey;
-                    layer.style.backgroundSize = `${backgroundSizeKey}px ${backgroundSizeKey}px`;
+                    layer.style.backgroundSize = backgroundSizeValue;
                     this._lastLocalSnapGridTransformKey = '';
                 }
                 return false;
@@ -3811,6 +3819,20 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
 
             const opacityValue = safeOpacity.toFixed(3);
             this._lastLocalSnapGridOpacity = opacityValue;
+            if (safeStyleKind === 'dot') {
+                const majorDot = 'radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.82) 0 1.9px, transparent 2px)';
+                const minorDot = 'radial-gradient(circle at 0 0, rgba(58, 69, 88, 0.68) 0 1.2px, transparent 1.3px)';
+                const backgroundImage = showMinorDots ? `${majorDot}, ${minorDot}` : majorDot;
+                this._lastLocalSnapGridKey = localGridKey;
+                this._lastLocalSnapGridPatternPeriodPx = safeMajorStep;
+                this._localSnapGridRasterPeriodPx = safeMajorStep;
+                this._lastLocalSnapGridTransformKey = '';
+                if (layer.style.backgroundImage !== backgroundImage) layer.style.backgroundImage = backgroundImage;
+                this._lastLocalSnapGridBackgroundSizeKey = backgroundSizeKey;
+                if (layer.style.backgroundSize !== backgroundSizeValue) layer.style.backgroundSize = backgroundSizeValue;
+                if (layer.style.opacity !== opacityValue) layer.style.opacity = opacityValue;
+                return true;
+            }
             const tileCanvas = this._localSnapGridTileCanvas || document.createElement('canvas');
             this._localSnapGridTileCanvas = tileCanvas;
             const tileSize = this._drawLocalSnapGridTile(
@@ -3828,7 +3850,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this._lastLocalSnapGridTransformKey = '';
             layer.style.backgroundImage = `url("${tileCanvas.toDataURL('image/png')}")`;
             this._lastLocalSnapGridBackgroundSizeKey = backgroundSizeKey;
-            layer.style.backgroundSize = `${backgroundSizeKey}px ${backgroundSizeKey}px`;
+            layer.style.backgroundSize = backgroundSizeValue;
             if (layer.style.opacity !== opacityValue) {
                 layer.style.opacity = opacityValue;
             }
@@ -3936,7 +3958,9 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const top = Number(viewportMetrics.top || 0);
             const pointerRevision = Math.max(0, Number(this._localSnapGridPointerRevision || 0));
 
-            if (this.isZooming === true && !!this._lastLocalSnapGridKey) {
+            if (this.isZooming === true &&
+                !!this._lastLocalSnapGridKey &&
+                this._getLocalSnapGridStyleKind() !== 'dot') {
                 this._syncLocalSnapGridSpotlightPosition(width, height, left, top);
                 this._lastLocalSnapGridPositionRevision = pointerRevision;
                 this._localSnapGridStyleDeferredForZoom = true;
@@ -3955,13 +3979,14 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             this._lastLocalSnapGridWorldStep = gridProjection.worldStep;
             this._lastLocalSnapGridWorldPeriod = gridProjection.worldStep * 10;
             const styleKind = this._getLocalSnapGridStyleKind();
-            const rawOpacity = Math.max(0.24, Math.min(0.54, cameraZ <= 1800 ? 0.48 : 0.48 - ((cameraZ - 1800) / 36000)));
+            const rawOpacity = Math.max(0.38, Math.min(0.64, cameraZ <= 1800 ? 0.60 : 0.60 - ((cameraZ - 1800) / 36000)));
             const opacity = Math.max(
-                0.24,
-                Math.min(0.54, Math.round(rawOpacity / LOCAL_SNAP_GRID_OPACITY_BUCKET) * LOCAL_SNAP_GRID_OPACITY_BUCKET)
+                0.38,
+                Math.min(0.64, Math.round(rawOpacity / LOCAL_SNAP_GRID_OPACITY_BUCKET) * LOCAL_SNAP_GRID_OPACITY_BUCKET)
             );
             const shouldDeferLocalGridStyleForZoom =
                 this.isZooming === true &&
+                styleKind !== 'dot' &&
                 !!this._lastLocalSnapGridKey;
 
             if (shouldDeferLocalGridStyleForZoom !== true) {
@@ -4013,10 +4038,24 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
             const height = Math.max(1, Number(viewportMetrics.height || 0));
             const left = Number(viewportMetrics.left || 0);
             const top = Number(viewportMetrics.top || 0);
+            const styleKind = this._getLocalSnapGridStyleKind();
+            if (this.isZooming === true && styleKind === 'dot') {
+                const cameraZ = Math.max(1, Number(this.camera?.position?.z || 1));
+                const vfov = (Number(this.camera?.fov || 45) * Math.PI) / 180;
+                const pxPerWorld = height / Math.max(1, 2 * Math.tan(vfov / 2) * cameraZ);
+                const projection = this._resolveLocalSnapGridWorldStep(pxPerWorld);
+                const rawOpacity = Math.max(0.38, Math.min(0.64,
+                    cameraZ <= 1800 ? 0.60 : 0.60 - ((cameraZ - 1800) / 36000)));
+                const opacity = Math.max(0.38, Math.min(0.64,
+                    Math.round(rawOpacity / LOCAL_SNAP_GRID_OPACITY_BUCKET) * LOCAL_SNAP_GRID_OPACITY_BUCKET));
+                this._applyLocalSnapGridStyle(
+                    layer, styleKind, projection.smallStepPx, projection.majorStepPx, opacity);
+                this._localSnapGridStyleDeferredForZoom = false;
+            }
             this._syncLocalSnapGridSpotlightPosition(width, height, left, top);
             this._lastLocalSnapGridPositionRevision = pointerRevision;
 
-            if (this.isZooming === true) {
+            if (this.isZooming === true && styleKind !== 'dot') {
                 this._localSnapGridStyleDeferredForZoom = true;
             }
             this._setLocalSnapGridVisible(true, this._lastLocalSnapGridOpacity || null);
@@ -6196,7 +6235,10 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     this.lodRenderer?.hasPendingNearCssWarmup?.(this) === true;
                 const isResidentMidFarLodFrame = this.useLODRendering &&
                     this.lodRenderer?.usesResidentMidFarInstances?.(this.camera) === true;
-                const isFullResMode = this.lodRenderer?.isInLODMode !== true;
+                // The current camera band owns the boundary frame. isInLODMode
+                // still describes the prior frame until updateLOD applies the
+                // resident/full-res handoff.
+                const isFullResMode = isResidentMidFarLodFrame !== true;
 
                 // Event-driven viewport sync handles the common case. Keep the
                 // fallback poll slow, and skip it entirely while resident MID/FAR
@@ -6232,7 +6274,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 const isLodModeActive = this.lodRenderer?.isInLODMode === true;
                 const residentDirty = isResidentMidFarLodFrame &&
                     this.lodRenderer?.hasResidentDirtyWork?.(this.camera, this) === true;
-                const residentBandChanging = isResidentMidFarLodFrame &&
+                const residentBandChanging = this.useLODRendering === true &&
                     this.lodRenderer?.willLodBandChange?.(this.camera) === true;
                 let canDeferResidentDirtyIdleFrame = false;
                 let canDeferResidentDirtyMotionFrame = false;
@@ -7332,8 +7374,12 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                     !hasNonCameraNavigationForcedUpdate &&
                     !hasMotionBlockingOverlayFocus &&
                     !this.isWindowResizing;
-                if (isMenuOverlayUiEnabled && window.MindMapMenuManager && shouldDeferFloatingUiDuringMotion !== true) {
-                    window.MindMapMenuManager.update();
+                if (isMenuOverlayUiEnabled && window.MindMapMenuManager) {
+                    if (shouldDeferFloatingUiDuringMotion === true) {
+                        window.MindMapMenuManager.updateForCameraMotion?.();
+                    } else {
+                        window.MindMapMenuManager.update();
+                    }
                 } else if (!isMenuOverlayUiEnabled && window.MindMapMenuManager?.hideMenu) {
                     window.MindMapMenuManager.hideMenu();
                 }