@mindexec/cli 0.2.458 → 0.2.459

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

@@ -404,65 +404,24 @@
             contentType === 'embed';
     }
 
-    function isAnimatedGifImageUrl(url) {
-        const normalized = normalizeImageAssetUrl(url);
-        if (!normalized) return false;
-        return normalized.split(/[?#]/)[0].toLowerCase().endsWith('.gif');
+    function isAnimatedGifImageModel(model) {
+        return window.MindMapAnimatedImagePreview?.isAnimatedGifImageModel?.(model) === true;
     }
 
-    function getMetadataValueCaseInsensitive(metadata, ...keys) {
-        if (!metadata || typeof metadata !== 'object') return '';
-
-        for (const key of keys) {
-            const direct = metadata[key];
-            if (direct !== undefined && direct !== null && String(direct).trim()) {
-                return String(direct).trim();
-            }
-        }
-
-        const wantedKeys = new Set(keys.map(key => String(key || '').toLowerCase()));
-        for (const key of Object.keys(metadata)) {
-            if (wantedKeys.has(String(key || '').toLowerCase())) {
-                const value = metadata[key];
-                if (value !== undefined && value !== null && String(value).trim()) {
-                    return String(value).trim();
-                }
-            }
-        }
-
-        return '';
+    function isWebpImageModel(model) {
+        return window.MindMapAnimatedImagePreview?.isWebpImageModel?.(model) === true;
     }
 
-    function isAnimatedGifImageModel(model) {
+    function isAnimationCapableImageModel(model) {
         if (!model || getNodeContentType(model) !== 'image') {
             return false;
         }
 
-        if (window.MindMapNodes?.isAnimatedGifImageNodeModel) {
-            return window.MindMapNodes.isAnimatedGifImageNodeModel(model) === true;
-        }
-
-        const metadata = getNodeMetadata(model) || {};
-        const mimeType = getMetadataValueCaseInsensitive(
-            metadata,
-            'fileMime',
-            'FileMime',
-            'mimeType',
-            'MimeType'
-        ).toLowerCase();
-        if (mimeType === 'image/gif') {
-            return true;
+        if (window.MindMapNodes?.isAnimationCapableImageNodeModel) {
+            return window.MindMapNodes.isAnimationCapableImageNodeModel(model) === true;
         }
 
-        return [
-            model?.response,
-            model?.Response,
-            metadata?.OriginalPath,
-            metadata?.OriginalUrl,
-            metadata?.originalUrl,
-            metadata?.ImageUrl,
-            metadata?.imageUrl
-        ].some(isAnimatedGifImageUrl);
+        return isAnimatedGifImageModel(model) || isWebpImageModel(model);
     }
 
     function isCss3dRendererEnabled(module) {
@@ -493,40 +452,8 @@
             || normalized.startsWith('file:');
     }
 
-    function getCanonicalImageAssetKey(url) {
-        const normalized = normalizeImageAssetUrl(url);
-        if (!normalized) {
-            return '';
-        }
-
-        const withoutQuery = normalized.split(/[?#]/)[0];
-        const lower = withoutQuery.toLowerCase();
-        const thumbsMarker = '/assets/thumbs/';
-        const assetsMarker = '/assets/';
-
-        if (lower.includes(thumbsMarker)) {
-            const assetName = withoutQuery.slice(lower.lastIndexOf(thumbsMarker) + thumbsMarker.length).split('/').pop() || '';
-            const dotIndex = assetName.lastIndexOf('.');
-            return (dotIndex > 0 ? assetName.slice(0, dotIndex) : assetName).toLowerCase();
-        }
-
-        if (lower.includes(assetsMarker)) {
-            const assetName = withoutQuery.slice(lower.lastIndexOf(assetsMarker) + assetsMarker.length).split('/').pop() || '';
-            const dotIndex = assetName.lastIndexOf('.');
-            return (dotIndex > 0 ? assetName.slice(0, dotIndex) : assetName).toLowerCase();
-        }
-
-        return withoutQuery.toLowerCase();
-    }
-
     function areImageAssetUrlsEquivalent(leftUrl, rightUrl) {
-        const leftKey = getCanonicalImageAssetKey(leftUrl);
-        const rightKey = getCanonicalImageAssetKey(rightUrl);
-        if (leftKey && rightKey) {
-            return leftKey === rightKey;
-        }
-
-        return normalizeImageAssetUrl(leftUrl) === normalizeImageAssetUrl(rightUrl);
+        return window.MindMapAnimatedImagePreview?.areAssetUrlsEquivalent?.(leftUrl, rightUrl) === true;
     }
 
     function isThumbnailImageUrl(url) {
@@ -557,9 +484,9 @@
         const missingAssetUrl = normalizeImageAssetUrl(metadata?.MissingAssetUrl || '');
         const responseFullResUrl = isImageContent && !isThumbnailImageUrl(responseUrl) ? responseUrl : '';
         const missingFullResUrl = !isThumbnailImageUrl(missingAssetUrl) ? missingAssetUrl : '';
-        const animatedGif = isAnimatedGifImageModel(model);
-        const mediaPreviewUrl = animatedGif ? '' : (thumbnailUrl || snapshotUrl || previewImageUrl);
-        const responsePreviewUrl = isImageContent && !animatedGif ? responseUrl : '';
+        const animationCapable = isAnimationCapableImageModel(model);
+        const mediaPreviewUrl = animationCapable ? '' : (thumbnailUrl || snapshotUrl || previewImageUrl);
+        const responsePreviewUrl = isImageContent && !animationCapable ? responseUrl : '';
         const previewUrl = mediaPreviewUrl || responsePreviewUrl || originalPath || originalUrl || missingAssetUrl;
         const fullResUrl = isImageContent
             ? (originalUrl || originalPath || responseFullResUrl || missingFullResUrl)
@@ -575,7 +502,8 @@
             missingAssetUrl,
             previewUrl,
             fullResUrl,
-            animatedGif
+            animationCapable,
+            animatedGif: animationCapable
         };
     }
 
@@ -818,6 +746,8 @@
             this._imageAtlasLoadingIds = new Set();
             this._imageAtlasActiveLoads = 0;
             this._imageAtlasRetryAfter = new Map();
+            this._residentStaticPreviewUrls = new Map();
+            this._residentStaticPreviewEpoch = 0;
             this._imageAtlasBatchPendingIds = new Set();
             this._imageAtlasBatchReadyIds = new Set();
             this._imageAtlasBatchActive = false;
@@ -1115,6 +1045,7 @@
             if (this._isNodeArrayDirty || this._cachedNodeArray.length !== nodeObjectsById.size) {
                 this._cachedNodeArray = Array.from(nodeObjectsById.values());
                 this._isNodeArrayDirty = false;
+                window.MindMapRenderPlan?.prepareImageAtlasForEntries?.(this, this._cachedNodeArray);
             }
         }
         // ▲▲▲ [Optimization] ▲▲▲
@@ -1379,14 +1310,19 @@
                 return;
             }
 
+            const residentPreviewUrl = this._getResidentStaticPreviewUrl(nodeId, entry.model, assetUrls);
+
             const cachedRecord = window.MindMapNodes?.imageCache?.get?.(nodeId) || null;
-            const cachedImage = window.MindMapTextureFactory?.resolveCachedImageEntry?.(cachedRecord, assetUrls.previewUrl, {
-                preferOriginal: false,
-                allowOriginalReuseForPreview: false,
-                originalUrl: assetUrls.fullResUrl || assetUrls.originalUrl || ''
-            }) || cachedRecord;
+            const cachedImage = residentPreviewUrl
+                ? (window.MindMapTextureFactory?.resolveCachedImageEntry?.(cachedRecord, residentPreviewUrl, {
+                    preferOriginal: false,
+                    allowOriginalReuseForPreview: false,
+                    resizeWidth: IMAGE_ATLAS_PREVIEW_REQUEST_WIDTH,
+                    originalUrl: assetUrls.fullResUrl || assetUrls.originalUrl || ''
+                }) || null)
+                : null;
             const cachedImageUrl = normalizeImageAssetUrl(cachedImage?.url || '');
-            const requestedPreviewUrl = normalizeImageAssetUrl(assetUrls.previewUrl);
+            const requestedPreviewUrl = normalizeImageAssetUrl(residentPreviewUrl);
             const cachedRetryAfter = Number(cachedImage?.retryAfter || 0);
             const cachedAssetUrl = cachedImageUrl || String(cachedImage?.assetKey || '');
             if (
@@ -1403,11 +1339,28 @@
                 nodeId,
                 model: entry.model,
                 previewUrl: assetUrls.previewUrl,
-                originalUrl: assetUrls.fullResUrl || assetUrls.originalUrl || ''
+                thumbnailUrl: assetUrls.thumbnailUrl || '',
+                originalUrl: assetUrls.fullResUrl || assetUrls.originalUrl || '',
+                previewEpoch: this._residentStaticPreviewEpoch
             });
             this._pumpImageAtlasPreviewLoadQueue();
         }
 
+        _getResidentStaticPreviewUrl(nodeId, model, assetUrls = getImageModelAssetUrls(model)) {
+            return window.MindMapAnimatedImagePreview?.getResidentStaticPreviewUrl?.(
+                this, nodeId, model, assetUrls
+            ) || '';
+        }
+
+        async _resolveSafeResidentPreviewUrl(item) {
+            const assetUrls = getImageModelAssetUrls(item?.model);
+            const resolver = window.MindMapAnimatedImagePreview?.resolveSafeResidentPreviewUrl;
+            return typeof resolver === 'function'
+                ? await resolver(this, item, assetUrls, getImageModelAssetUrls, details =>
+                    emitMindCanvasTrace('lod.image.staticPreview.ready', this._module, details))
+                : '';
+        }
+
         _pumpImageAtlasPreviewLoadQueue() {
             const textureFactory = window.MindMapTextureFactory;
             const imageCache = window.MindMapNodes?.imageCache;
@@ -1440,8 +1393,13 @@
                 this._imageAtlasLoadingIds.add(item.nodeId);
                 let didLoadImage = false;
 
-                Promise.resolve(
-                    textureFactory.ensureImageCached(item.nodeId, item.previewUrl, imageCache, {
+                Promise.resolve(this._resolveSafeResidentPreviewUrl(item)).then((resolvedPreviewUrl) => {
+                    item.resolvedPreviewUrl = resolvedPreviewUrl;
+                    if (!resolvedPreviewUrl) {
+                        return null;
+                    }
+
+                    return textureFactory.ensureImageCached(item.nodeId, resolvedPreviewUrl, imageCache, {
                         authToken: this._module?.authToken || '',
                         resizeWidth: IMAGE_ATLAS_PREVIEW_REQUEST_WIDTH,
                         preferOriginal: false,
@@ -1463,12 +1421,18 @@
                                 setImageModelPreviewUrl(item.model, normalized);
                             }
                         }
-                    })
-                ).then((cachedImage) => {
+                    });
+                }).then((cachedImage) => {
                     didLoadImage = !!(cachedImage?.image) && cachedImage?.isError !== true;
                     item.cachedImage = cachedImage || null;
-                }).catch(() => {
+                }).catch((error) => {
                     didLoadImage = false;
+                    if (isWebpImageModel(item?.model)) {
+                        emitMindCanvasTrace('lod.image.staticPreview.failed', this._module, {
+                            nodeId: item.nodeId,
+                            reason: String(error?.message || error || 'unknown')
+                        });
+                    }
                 }).finally(() => {
                     this._imageAtlasActiveLoads = Math.max(0, this._imageAtlasActiveLoads - 1);
                     this._imageAtlasQueuedIds.delete(item.nodeId);
@@ -1511,14 +1475,22 @@
         _getImageLodSource(entry) {
             const nodeId = String(entry?.model?.id || '').trim();
             const assetUrls = getImageModelAssetUrls(entry?.model);
+            const webpModel = isWebpImageModel(entry?.model);
+            const residentPreviewUrl = this._getResidentStaticPreviewUrl(nodeId, entry?.model, assetUrls);
+            if (webpModel && !residentPreviewUrl) {
+                this._queueImageAtlasPreviewLoad(entry);
+                return null;
+            }
+
             const cachedRecord = nodeId ? window.MindMapNodes?.imageCache?.get?.(nodeId) || null : null;
             const cachedImage = nodeId
                 ? (
-                    window.MindMapTextureFactory?.resolveCachedImageEntry?.(cachedRecord, assetUrls.previewUrl, {
+                    window.MindMapTextureFactory?.resolveCachedImageEntry?.(cachedRecord, residentPreviewUrl, {
                         preferOriginal: false,
                         allowOriginalReuseForPreview: false,
+                        resizeWidth: IMAGE_ATLAS_PREVIEW_REQUEST_WIDTH,
                         originalUrl: assetUrls.fullResUrl || assetUrls.originalUrl || ''
-                    }) || cachedRecord
+                    }) || null
                 )
                 : null;
             const cachedSource = cachedImage?.image || null;
@@ -1540,6 +1512,13 @@
                 };
             }
 
+            if (isThumbnailImageUrl(residentPreviewUrl)) {
+                if (!isCachedImageRetryPending) {
+                    this._queueImageAtlasPreviewLoad(entry);
+                }
+                return null;
+            }
+
             const cssImage = entry?.cssObject?.element?.querySelector?.('img') || null;
             const cssImageWidth = Number(cssImage?.naturalWidth || cssImage?.width || 0);
             const cssImageHeight = Number(cssImage?.naturalHeight || cssImage?.height || 0);
@@ -1640,8 +1619,6 @@
                         sy = (source.height - sh) * 0.5;
                 }
 
-                // Match NEAR image nodes: CSS/WebGL both use object-fit: cover
-                // against the node rectangle, then map that result over the quad.
                 scratchCtx.drawImage(source.image, sx, sy, sw, sh, 0, 0, size, size);
                 scratchCtx.restore();
 
@@ -1652,9 +1629,8 @@
                 ctx.fillStyle = '#eef2f7';
                 ctx.fillRect(x, y, size, size);
                 ctx.drawImage(scratch, 0, 0, size, size, x, y, size, size);
-                if (this.imageAtlasTexture) {
-                    this.imageAtlasTexture.needsUpdate = true;
-                }
+                if (!window.MindMapRenderPlan?.uploadImageAtlasTile?.(this, slot, scratch))
+                    window.MindMapRenderPlan?.scheduleImageAtlasUpload?.(this, this._module);
                 return true;
             } catch {
                 try { scratchCtx.restore(); } catch { }
@@ -3417,7 +3393,7 @@
             const pendingAnimatedGifCssFallbacks = usesAnimatedGifCssFallbacks && activeImageCssFallbackCount <= 0;
             const staleImageCssFallbacks = imageCssFallbackCount > 0 &&
                 (usesAnyImageCssFallbacks !== true || activeImageCssFallbackCount <= 0);
-            const lineDetailRestorePending = this._hasPendingLineDetailRestore(lodBand);
+            const lineDetailRestorePending = window.MindMapRenderPlan?.hasActionableResidentLineDetails?.(this, module, lodBand) === true;
             const dirty = (
                 this._instancesDirty === true ||
                 this._imageInstancesDirty === true ||
@@ -5878,9 +5854,7 @@
                 if (this.isInLODMode === true &&
                     this._instancesDirty &&
                     this._shouldDeferResidentInstanceRebuild(module, lodBand)) {
-                    if (module) {
-                        module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), 12);
-                    }
+                    this._keepResidentLodSettleFrames(module, 2, 'defer-resident-instance-rebuild');
                     if (LOD_PERF_DEBUG) {
                         _prof('done');
                     }
@@ -5896,9 +5870,7 @@
                 if (this.isInLODMode === true &&
                     this._lodCleanupPending === true &&
                     this._isResidentLodInteractionActive(module)) {
-                    if (module) {
-                        module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), 12);
-                    }
+                    this._keepResidentLodSettleFrames(module, 2, 'defer-lod-cleanup');
                     if (LOD_PERF_DEBUG) {
                         _prof('done');
                     }
@@ -6174,9 +6146,7 @@
                 // ▼▼▼ [Perf] Only update instance data when dirty or node count changed ▼▼▼
                 // Check if node count changed (add/remove detection)
                 if (this._instancesDirty && this._shouldDeferResidentInstanceRebuild(module, lodBand)) {
-                    if (module) {
-                        module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), 12);
-                    }
+                    this._keepResidentLodSettleFrames(module, 2, 'defer-resident-instance-rebuild');
                     if (LOD_PERF_DEBUG) {
                         _prof('done');
                     }
@@ -6388,9 +6358,7 @@
                         Number(this._residentRebuildDeferredUntil || 0),
                         now + LOD_RESIDENT_REBUILD_SETTLE_MS
                     );
-                    if (module) {
-                        module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), 4);
-                    }
+                    this._keepResidentLodSettleFrames(module, 2, 'defer-resident-full-rebuild');
                 }
 
                 if (this._instancesDirty && residentFullBuildBlockedThisFrame !== true) {
@@ -7119,13 +7087,8 @@
             }, safeDelayMs);
         }
 
-        _keepResidentLodSettleFrames(module = this._module, frames = 12, reason = 'resident-settle') {
+        _keepResidentLodSettleFrames(module = this._module, _frames = 12, reason = 'resident-settle') {
             if (module) {
-                if (this._isResidentLodInteractionActive(module)) {
-                    module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), frames);
-                    return;
-                }
-
                 this._scheduleResidentLodWake(reason, LOD_RESIDENT_REBUILD_SETTLE_MS);
             }
         }
@@ -9504,6 +9467,7 @@
                 clearTimeout(this._residentLodWakeTimer);
                 this._residentLodWakeTimer = 0;
             }
+            window.MindMapRenderPlan?.clearScheduledImageAtlasUpload?.(this);
             this._residentLodWakeReason = '';
             this.isInLODMode = null;
 
@@ -9550,6 +9514,8 @@
             this._imageAtlasLoadingIds.clear();
             this._imageAtlasActiveLoads = 0;
             this._imageAtlasRetryAfter.clear();
+            this._residentStaticPreviewUrls.clear();
+            this._residentStaticPreviewEpoch++;
             this._resetImageAtlasBatchState();
             this._imageAtlasRebuildPending = false;
             this._imageAtlasRebuildDeferredUntil = 0;
@@ -9669,6 +9635,7 @@
                 this._nearPriorityRecordById?.delete?.(nodeId);
                 this._lodConsoleProxyNodeIds?.delete?.(nodeId);
                 this._lodImageCssFallbackNodeIds.delete(nodeId);
+                this._residentStaticPreviewUrls.delete(nodeId);
                 this._lodTemplateCssNodeIds?.delete?.(nodeId);
                 this._fullResCssFringePreparedIds?.delete?.(nodeId);
                 removedAny = true;
@@ -10253,6 +10220,8 @@
             this._imageAtlasLoadingIds.clear();
             this._imageAtlasActiveLoads = 0;
             this._imageAtlasRetryAfter.clear();
+            this._residentStaticPreviewUrls.clear();
+            this._residentStaticPreviewEpoch++;
             this._pendingSelectionRefreshIds.clear();
             if (this._idleRebuildTimer) {
                 clearTimeout(this._idleRebuildTimer);
@@ -10262,6 +10231,7 @@
                 clearTimeout(this._residentLodWakeTimer);
                 this._residentLodWakeTimer = 0;
             }
+            window.MindMapRenderPlan?.clearScheduledImageAtlasUpload?.(this);
             this._resetImageAtlasBatchState();
             this.thumbnailMap.clear();
             this.pendingNodes.clear();

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

@@ -1061,27 +1061,31 @@
     }
 
     // ▼▼▼ [New] Screen-space position using worldToScreen ▼▼▼
-    function worldToScreen(worldX, worldY, camera, container) {
-        const THREE = globalThis.THREE;
-        const vector = new THREE.Vector3(worldX, worldY, 0);
-        vector.project(camera);
-
-        const halfWidth = container.clientWidth / 2;
-        const halfHeight = container.clientHeight / 2;
-
-        return {
-            x: (vector.x * halfWidth) + halfWidth,
-            y: -(vector.y * halfHeight) + halfHeight
-        };
-    }
-
-    function updateMenuScreenPosition(menuEl, nodeEntry) {
+    function worldToScreen(worldX, worldY, camera, container) {
+        const THREE = globalThis.THREE;
+        const vector = new THREE.Vector3(worldX, worldY, 0);
+        vector.project(camera);
+
+        const viewportWidth = Number(_module?._lastViewportWidth || _module?._lastContainerWidth || container.clientWidth || 1);
+        const viewportHeight = Number(_module?._lastViewportHeight || _module?._lastContainerHeight || container.clientHeight || 1);
+        const viewportLeft = Number(_module?._lastViewportLeft || 0);
+        const viewportTop = Number(_module?._lastViewportTop || 0);
+        const halfWidth = viewportWidth / 2;
+        const halfHeight = viewportHeight / 2;
+
+        return {
+            x: viewportLeft + (vector.x * halfWidth) + halfWidth,
+            y: viewportTop - (vector.y * halfHeight) + halfHeight
+        };
+    }
+
+    function updateMenuScreenPosition(menuEl, nodeEntry, cameraMotionOnly = false) {
         if (!menuEl || !nodeEntry || !_module || !_module.camera || !_module.container) return;
 
         const templateNode = document.getElementById(`node-${nodeEntry.model?.id || currentMenuNodeId}`);
         let anchorX = null;
         let anchorY = null;
-        const shouldPreferProjectedAnchor =
+        const shouldPreferProjectedAnchor = cameraMotionOnly === true ||
             _module.isZooming === true ||
             _module.isPanning === true ||
             _module.isDraggingNode === true ||
@@ -1116,8 +1120,15 @@
             anchorY = screenPos.y;
         }
 
-        const menuRect = menuEl.getBoundingClientRect();
-        const halfMenuWidth = menuRect.width > 0 ? menuRect.width / 2 : 0;
+        let halfMenuWidth = Number(menuEl._mindMapHalfWidth || 0);
+        let menuHeight = Number(menuEl._mindMapHeight || 0);
+        if (cameraMotionOnly !== true || halfMenuWidth <= 0 || menuHeight <= 0) {
+            const menuRect = menuEl.getBoundingClientRect();
+            halfMenuWidth = menuRect.width > 0 ? menuRect.width / 2 : 0;
+            menuHeight = menuRect.height || 0;
+            menuEl._mindMapHalfWidth = halfMenuWidth;
+            menuEl._mindMapHeight = menuHeight;
+        }
         const viewportMargin = 10;
         const verticalGap = 14;
 
@@ -1126,7 +1137,7 @@
             Math.max(viewportMargin + halfMenuWidth, anchorX)
         );
         const anchoredTop = anchorY - verticalGap;
-        const minTop = viewportMargin + (menuRect.height || 0);
+        const minTop = viewportMargin + menuHeight;
         const clampedTop = Math.max(minTop, anchoredTop);
 
         menuEl.style.left = `${clampedLeft}px`;
@@ -1134,7 +1145,7 @@
     }
     // ▲▲▲ [New] ▲▲▲
 
-    function update() {
+    function update() {
         if (currentMenuElement && currentMenuNodeId && _module) {
             const nodeEntry = _module.nodeObjectsById.get(currentMenuNodeId);
             if (nodeEntry) {
@@ -1543,8 +1554,19 @@
             });
         }
     }
+
+    function updateForCameraMotion() {
+        if (!currentMenuElement || !currentMenuNodeId || !_module) return false;
+        const nodeEntry = _module.nodeObjectsById.get(currentMenuNodeId);
+        if (!nodeEntry) {
+            hideMenu();
+            return false;
+        }
+        updateMenuScreenPosition(currentMenuElement, nodeEntry, true);
+        return true;
+    }
 
-    window.MindMapMenuManager = { init, showMenu, hideMenu, update };
+    window.MindMapMenuManager = { init, showMenu, hideMenu, update, updateForCameraMotion };
 
     console.log('✅ mind-map-menu-manager.js loaded');
 })();

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

@@ -1412,10 +1412,11 @@
         return normalizeImageAssetUrl(url).toLowerCase().includes('/assets/thumbs/');
     }
 
-    function isAnimatedGifImageUrl(url) {
+    function isAnimationCapableImageUrl(url) {
         const normalized = normalizeImageAssetUrl(url);
         if (!normalized) return false;
-        return normalized.split(/[?#]/)[0].toLowerCase().endsWith('.gif');
+        const pathname = normalized.split(/[?#]/)[0].toLowerCase();
+        return pathname.endsWith('.gif') || pathname.endsWith('.webp');
     }
 
     function getMetadataValueCaseInsensitive(metadata, ...keys) {
@@ -1441,6 +1442,34 @@
         return '';
     }
 
+    function isAnimationCapableImageNodeModel(nodeModel) {
+        if (!nodeModel || getNodeContentTypeLower(nodeModel) !== 'image') {
+            return false;
+        }
+
+        const metadata = getNodeMetadata(nodeModel) || {};
+        const mimeType = getMetadataValueCaseInsensitive(
+            metadata,
+            'fileMime',
+            'FileMime',
+            'mimeType',
+            'MimeType'
+        ).toLowerCase();
+        if (mimeType === 'image/gif' || mimeType === 'image/webp') {
+            return true;
+        }
+
+        return [
+            nodeModel?.response,
+            nodeModel?.Response,
+            metadata?.OriginalPath,
+            metadata?.OriginalUrl,
+            metadata?.originalUrl,
+            metadata?.ImageUrl,
+            metadata?.imageUrl
+        ].some(isAnimationCapableImageUrl);
+    }
+
     function isAnimatedGifImageNodeModel(nodeModel) {
         if (!nodeModel || getNodeContentTypeLower(nodeModel) !== 'image') {
             return false;
@@ -1466,7 +1495,7 @@
             metadata?.originalUrl,
             metadata?.ImageUrl,
             metadata?.imageUrl
-        ].some(isAnimatedGifImageUrl);
+        ].some(url => normalizeImageAssetUrl(url).split(/[?#]/)[0].toLowerCase().endsWith('.gif'));
     }
 
     function getAnimatedGifOriginalReference(nodeModel, fallback = '') {
@@ -1683,9 +1712,9 @@
         const metadata = ensureNodeMetadataObject(nodeModel);
         const normalizedContent = normalizeImageAssetUrl(nextContent);
         const thumbnailUrl = normalizeImageAssetUrl(metadata?.ThumbnailUrl || metadata?.thumbnailUrl || '');
-        const isAnimatedGif = isAnimatedGifImageNodeModel(nodeModel);
+        const isAnimatedImage = isAnimationCapableImageNodeModel(nodeModel);
 
-        if (isAnimatedGif) {
+        if (isAnimatedImage) {
             const originalReference = getAnimatedGifOriginalReference(nodeModel, normalizedContent);
             if (originalReference) {
                 setNodeImageOriginalReference(nodeModel, originalReference);
@@ -1697,7 +1726,7 @@
             setNodeImageOriginalReference(nodeModel, normalizedContent);
         }
 
-        if (thumbnailUrl && !isAnimatedGif) {
+        if (thumbnailUrl && !isAnimatedImage) {
             setNodeImagePreviewUrl(nodeModel, thumbnailUrl);
             return normalizeImageAssetUrl(nodeModel.response ?? nodeModel.Response ?? '');
         }
@@ -1824,15 +1853,15 @@
             ''
         );
         const missingAssetUrl = normalizeImageAssetUrl(metadata?.MissingAssetUrl || '');
-        const isAnimatedGif = isAnimatedGifImageNodeModel(nodeModel);
+        const isAnimatedImage = isAnimationCapableImageNodeModel(nodeModel);
         const responseFullResUrl = isImageContent && canUseAsFullResImageUrl(responseUrl) ? responseUrl : '';
         const missingFullResUrl = canUseAsFullResImageUrl(missingAssetUrl) ? missingAssetUrl : '';
-        const mediaPreviewUrl = isAnimatedGif ? '' : (thumbnailUrl || snapshotUrl || previewImageUrl);
-        const responsePreviewUrl = isImageContent && !isAnimatedGif ? responseUrl : '';
+        const mediaPreviewUrl = isAnimatedImage ? '' : (thumbnailUrl || snapshotUrl || previewImageUrl);
+        const responsePreviewUrl = isImageContent && !isAnimatedImage ? responseUrl : '';
         const fullResUrl = isImageContent
             ? (originalUrl || originalPath || responseFullResUrl || missingFullResUrl)
             : (originalUrl || originalPath || snapshotUrl || previewImageUrl || thumbnailUrl || missingFullResUrl);
-        const previewUrl = isAnimatedGif
+        const previewUrl = isAnimatedImage
             ? (fullResUrl || responseUrl || originalPath || originalUrl || missingAssetUrl)
             : (mediaPreviewUrl || responsePreviewUrl || originalPath || originalUrl || missingAssetUrl);
 
@@ -1846,13 +1875,14 @@
             missingAssetUrl,
             previewUrl,
             fullResUrl,
-            animatedGif: isAnimatedGif
+            animationCapable: isAnimatedImage,
+            animatedGif: isAnimatedImage
         };
     }
 
     function hasNodeImagePreviewSource(assetUrls) {
         if (!assetUrls || typeof assetUrls !== 'object') return false;
-        if (assetUrls.animatedGif === true) return false;
+        if (assetUrls.animationCapable === true || assetUrls.animatedGif === true) return false;
         return !!(
             assetUrls.thumbnailUrl ||
             (assetUrls.responseUrl && isThumbnailImageUrl(assetUrls.responseUrl))
@@ -1879,7 +1909,7 @@
         if (!assetUrls.previewUrl) {
             return;
         }
-        if (assetUrls.animatedGif === true) {
+        if (assetUrls.animationCapable === true || assetUrls.animatedGif === true) {
             return;
         }
 
@@ -4570,6 +4600,7 @@
         bringNodeToFront: bringNodeToFront,
         updateNodeSelectionStyle: updateNodeSelectionStyle,
         applySingleSelection: applySingleSelection,
+        moveCursorAfterNodePlacement: moveCursorAfterNodePlacement,
         resetState: resetState,
         captureDeleteSnapshot: captureDeleteSnapshot,
         // ▼▼▼ [New] Expose helper function for external callers ▼▼▼
@@ -4580,6 +4611,7 @@
         updateAnimatedImageStatusTextures: updateAnimatedImageStatusTextures,
         applyCanonicalNodeResponse: applyCanonicalNodeResponse,
         isGeneratedImageNodeModel: isGeneratedImageNodeModel,
+        isAnimationCapableImageNodeModel: isAnimationCapableImageNodeModel,
         isAnimatedGifImageNodeModel: isAnimatedGifImageNodeModel,
         getNodeImageAssetUrls: getNodeImageAssetUrls,
         setNodeImageOriginalUrl: setNodeImageOriginalUrl,