@mindexec/cli 0.2.0

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

@@ -0,0 +1,1430 @@
+// File: mind-map-dnd.js
+// MindMap drag-and-drop handling (preprocess-then-create approach to reduce flicker)
+window.MindMapDnD = (function () {
+
+    // ▼▼▼ [New] IndexedDB helper for directory handles ▼▼▼
+    const IDBHelper = {
+        dbName: 'MindMapDB',
+        storeName: 'handles',
+        async getDB() {
+            return new Promise((resolve, reject) => {
+                const request = indexedDB.open(this.dbName, 1);
+                request.onupgradeneeded = (e) => {
+                    if (!e.target.result.objectStoreNames.contains(this.storeName)) {
+                        e.target.result.createObjectStore(this.storeName);
+                    }
+                };
+                request.onsuccess = () => resolve(request.result);
+                request.onerror = () => reject(request.error);
+            });
+        },
+        async set(key, val) {
+            const db = await this.getDB();
+            return new Promise((resolve, reject) => {
+                const tx = db.transaction(this.storeName, 'readwrite');
+                tx.objectStore(this.storeName).put(val, key);
+                tx.oncomplete = () => resolve();
+                tx.onerror = () => reject(tx.error);
+            });
+        },
+        async get(key) {
+            const db = await this.getDB();
+            return new Promise((resolve, reject) => {
+                const tx = db.transaction(this.storeName, 'readonly');
+                const req = tx.objectStore(this.storeName).get(key);
+                req.onsuccess = () => resolve(req.result);
+                req.onerror = () => reject(req.error);
+            });
+        }
+    };
+    // ▲▲▲ [New] ▲▲▲
+
+    if (!window.MindMapFileRegistry) {
+        window.MindMapFileRegistry = [];
+    }
+
+    function registerCoreHandlers() {
+        // 1. PDF handler
+        if (!window.MindMapFileRegistry.some(h => h.name === 'CorePDF')) {
+            window.MindMapFileRegistry.push({
+                name: 'CorePDF',
+                priority: 5,
+                check: (file) => file.type === 'application/pdf',
+                getType: () => 'pdf'
+            });
+        }
+
+        // 2. Image handler (updated)
+        if (!window.MindMapFileRegistry.some(h => h.name === 'CoreImage')) {
+            window.MindMapFileRegistry.push({
+                name: 'CoreImage',
+                priority: 5,
+                // [Fix] If MIME type is empty or octet-stream, fall back to extension check
+                check: (file) => {
+                    if (file.type && file.type.startsWith('image/')) return true;
+
+                    // Extension-based check (Windows/WebView2 compatibility)
+                    const name = file.name ? file.name.toLowerCase() : '';
+                    return /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/.test(name);
+                },
+                getType: () => 'image'
+            });
+        }
+
+        // 3. Video handler
+        if (!window.MindMapFileRegistry.some(h => h.name === 'CoreVideo')) {
+            window.MindMapFileRegistry.push({
+                name: 'CoreVideo',
+                priority: 5,
+                check: (file) => {
+                    if (file.type && file.type.startsWith('video/')) return true;
+                    const name = file.name ? file.name.toLowerCase() : '';
+                    return /\.(mp4|webm|mov|ogv|m4v)$/.test(name);
+                },
+                getType: () => 'video'
+            });
+        }
+
+        // ▼▼▼ [New] 4. Text handler (basic .txt support) ▼▼▼
+        if (!window.MindMapFileRegistry.some(h => h.name === 'CoreText')) {
+            window.MindMapFileRegistry.push({
+                name: 'CoreText',
+                priority: 5,
+                check: (file) => {
+                    // If MIME type is text/plain or extension is .txt or .md
+                    const name = file.name ? file.name.toLowerCase() : '';
+                    return file.type === 'text/plain' ||
+                        name.endsWith('.txt') ||
+                        name.endsWith('.md');
+                },
+                getType: () => 'text'
+            });
+        }
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] 5. Code handler (source code files - Troika rendered) ▼▼▼
+        if (!window.MindMapFileRegistry.some(h => h.name === 'CoreCode')) {
+            const CODE_EXTENSIONS = [
+                '.js', '.jsx', '.ts', '.tsx', '.py', '.cs', '.java',
+                '.cpp', '.c', '.h', '.go', '.rs', '.rb', '.php',
+                '.swift', '.kt', '.json', '.xml', '.yaml', '.yml',
+                '.sql', '.html', '.css', '.scss', '.less', '.sh',
+                '.bat', '.ps1', '.csv', '.razor' // Added .razor for Blazor
+            ];
+            window.MindMapFileRegistry.push({
+                name: 'CoreCode',
+                priority: 4, // Higher priority than text
+                check: (file) => {
+                    const name = file.name ? file.name.toLowerCase() : '';
+                    return CODE_EXTENSIONS.some(ext => name.endsWith(ext));
+                },
+                getType: () => 'code'
+            });
+        }
+        // ▲▲▲ [New] ▲▲▲
+
+        console.log('[MindMapDnD] Core file handlers (PDF, Image, Video, Text, Code) registered');
+    }
+    registerCoreHandlers();
+
+    const eventHandlers = new WeakMap();
+    const GRID_SNAP = 10;
+
+    function computeDroppedImageNodeSize(originalWidth, originalHeight) {
+        if (window.mindMap?.computeImageNodeSize) {
+            return window.mindMap.computeImageNodeSize(originalWidth, originalHeight, {
+                gridSnap: GRID_SNAP,
+                minWidth: 100,
+                minHeight: 100,
+                maxWidth: 4000,
+                maxHeight: 4000,
+                fallbackWidth: 470,
+                fallbackHeight: 350
+            });
+        }
+
+        const width = Math.max(100, Math.round(Number(originalWidth || 470) / GRID_SNAP) * GRID_SNAP);
+        const height = Math.max(100, Math.round(Number(originalHeight || 350) / GRID_SNAP) * GRID_SNAP);
+        return { width, height };
+    }
+
+    // ▼▼▼ [Profiling] Drag statistics tracking ▼▼▼
+    let _dragStats = {
+        startTime: 0,
+        dragOverCount: 0
+    };
+    // ▲▲▲ [Profiling] ▲▲▲
+
+    function getBoundHandlers(module) {
+        if (!eventHandlers.has(module)) {
+            eventHandlers.set(module, {
+                boundOnDragEnter: onDragEnter.bind(null, module), // [New]
+                boundOnDragOver: onDragOver.bind(null, module),
+                boundOnDragLeave: onDragLeave.bind(null, module),
+                boundOnDrop: onDrop.bind(null, module)
+            });
+        }
+        return eventHandlers.get(module);
+    }
+
+    // [New] dragenter handler
+    function onDragEnter(module, e) {
+        // Ignore movements between child elements inside the container
+        if (module.container.contains(e.relatedTarget)) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'copy';
+        }
+
+        // ▼▼▼ [Profiling] Record drag start time ▼▼▼
+        _dragStats.startTime = performance.now();
+        _dragStats.dragOverCount = 0;
+        console.log('[DnD] 🟢 Drag entered. Tracking started.');
+        // ▲▲▲ [Profiling] ▲▲▲
+
+        return false;
+    }
+
+    function onDragOver(module, e) {
+        // ▼▼▼ [Optimization] Do the minimum work - avoid IPC overload ▼▼▼
+        // preventDefault() is required to allow drop
+        e.preventDefault();
+
+        // Profiling counter (very lightweight)
+        _dragStats.dragOverCount++;
+
+        // Remove all extra work (like setting dropEffect)
+        // In WebView2, each call can trigger IPC traffic
+        return false;
+        // ▲▲▲ [Optimization] ▲▲▲
+    }
+
+    function onDragLeave(module, e) {
+        // Do not treat entering a child element as a leave
+        if (module.container.contains(e.relatedTarget)) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    function extractImageUrl(dataTransfer) {
+        if (!dataTransfer) return null;
+        const html = dataTransfer.getData('text/html');
+        if (html) {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            const img = doc.querySelector('img');
+            if (img && img.src) return img.src;
+        }
+        const text = (dataTransfer.getData('text/plain') || '').trim();
+        if (text && (text.startsWith('data:image') || isImageUrl(text))) return text;
+        return null;
+    }
+
+    function extractDroppedUrl(dataTransfer) {
+        if (!dataTransfer) return null;
+        const uri = dataTransfer.getData('text/uri-list') || dataTransfer.getData('URL');
+        if (uri) return uri.split(/\r?\n/).find(line => line && !line.startsWith('#')) || uri;
+        const text = (dataTransfer.getData('text/plain') || '').trim();
+        if (text && /^https?:\/\//i.test(text)) return text;
+        return null;
+    }
+
+    function isImageUrl(url) {
+        return /^https?:\/\/.+\.(png|jpe?g|gif|webp|bmp|svg)(\?|#|$)/i.test(String(url || '').trim());
+    }
+
+    async function fetchImageAsBlobUrl(url) {
+        if (!url) return null;
+        if (url.startsWith('data:') || url.startsWith('blob:')) {
+            return url;
+        }
+
+        try {
+            const response = await fetch(url, { mode: 'cors', credentials: 'omit' });
+            if (!response.ok) throw new Error(`Network response was not ok (${response.status})`);
+            const blob = await response.blob();
+            return URL.createObjectURL(blob);
+        } catch (e) {
+            console.warn(`[MindMapDnD] CORS fetch failed (${e?.message || 'unknown'}). Image drop cancelled.`, e);
+            window.MindMapFeedback?.toast?.('The server blocked copying.', { kind: 'error' });
+            return null;
+        }
+    }
+
+    function measureImageSize(src) {
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.onload = () => {
+                resolve(computeDroppedImageNodeSize(img.naturalWidth, img.naturalHeight));
+            };
+            img.onerror = () => {
+                console.warn('[MindMapDnD] Failed to measure image size. Using default.');
+                resolve(computeDroppedImageNodeSize(470, 350));
+            };
+            img.src = src;
+        });
+    }
+
+    const HOSTED_LOCAL_BRIDGE_STORAGE_KEY = 'MindExec.AllowHostedLocalBridge';
+    const CLOUD_VIDEO_DND_BLOCKED_MESSAGE = 'Local video files are not available in cloud mode. Use Local Bridge for large video workflows, or use YouTube, a direct video URL, or AI video.';
+
+    function isLoopbackHost(hostname) {
+        return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1';
+    }
+
+    function getCurrentLoopbackBridgeUrl() {
+        const location = window.location;
+        if (!location || !/^https?:$/i.test(location.protocol || '') || !isLoopbackHost(location.hostname || '')) {
+            return null;
+        }
+
+        return location.origin;
+    }
+
+    function preferCurrentLoopbackBridgeOrigin(bridgeUrl) {
+        const currentOrigin = getCurrentLoopbackBridgeUrl();
+        if (!bridgeUrl || !currentOrigin) {
+            return bridgeUrl;
+        }
+
+        try {
+            const bridgeUri = new URL(bridgeUrl);
+            const currentUri = new URL(currentOrigin);
+            if (isLoopbackHost(bridgeUri.hostname)
+                && isLoopbackHost(currentUri.hostname)
+                && bridgeUri.protocol === currentUri.protocol
+                && bridgeUri.port === currentUri.port) {
+                return currentOrigin;
+            }
+        } catch {
+            return bridgeUrl;
+        }
+
+        return bridgeUrl;
+    }
+
+    // Direct upload to Bridge server (faster than C# route)
+    const BRIDGE_URLS = [getCurrentLoopbackBridgeUrl(), 'http://127.0.0.1:5147', 'http://localhost:5147']
+        .filter((url, index, urls) => !!url && urls.indexOf(url) === index);
+    let bridgeAuthPromise = null;
+    let bridgeConnectedPromise = null;
+    let activeBridgeUrl = preferCurrentLoopbackBridgeOrigin(window.MindExecLocalBridge?.activeBridgeUrl || BRIDGE_URLS[0]);
+
+    function isHostedLocalBridgeExplicitlyEnabled() {
+        if (window.MindExecLocalBridge?.allowHostedAutoProbe === true) {
+            return true;
+        }
+
+        try {
+            return window.localStorage?.getItem(HOSTED_LOCAL_BRIDGE_STORAGE_KEY) === 'true';
+        } catch {
+            return false;
+        }
+    }
+
+    function resetLocalBridgeProbeCache() {
+        bridgeAuthPromise = null;
+        bridgeConnectedPromise = null;
+        window.__mindExecutionBridgeAuthPromise = null;
+    }
+
+    function setActiveBridgeUrl(bridgeUrl) {
+        activeBridgeUrl = preferCurrentLoopbackBridgeOrigin(bridgeUrl || BRIDGE_URLS[0]);
+        window.MindExecLocalBridge = {
+            ...(window.MindExecLocalBridge || {}),
+            activeBridgeUrl
+        };
+    }
+
+    function setHostedLocalBridgeExplicitlyEnabled(enabled) {
+        const nextEnabled = enabled === true;
+        try {
+            if (nextEnabled) {
+                window.localStorage?.setItem(HOSTED_LOCAL_BRIDGE_STORAGE_KEY, 'true');
+            } else {
+                window.localStorage?.removeItem(HOSTED_LOCAL_BRIDGE_STORAGE_KEY);
+            }
+        } catch { }
+
+        window.MindExecLocalBridge = {
+            ...(window.MindExecLocalBridge || {}),
+            allowHostedAutoProbe: nextEnabled,
+            hostedAccessEnabled: nextEnabled
+        };
+        resetLocalBridgeProbeCache();
+        window.dispatchEvent?.(new CustomEvent('mindexec-local-bridge-access-changed', {
+            detail: { enabled: nextEnabled }
+        }));
+    }
+
+    function isLocalBridgeAutoProbeAllowed() {
+        if (window.__isNativeApp) {
+            return false;
+        }
+
+        const hostname = window.location?.hostname || '';
+        return isLoopbackHost(hostname) || isHostedLocalBridgeExplicitlyEnabled();
+    }
+
+    function getBridgeUrlCandidates() {
+        const seen = new Set();
+        return [getCurrentLoopbackBridgeUrl(), activeBridgeUrl, ...BRIDGE_URLS].filter(url => {
+            if (!url || seen.has(url)) {
+                return false;
+            }
+
+            seen.add(url);
+            return true;
+        });
+    }
+
+    function buildBridgeStatusUrl(bridgeUrl) {
+        const nonce = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+        return `${bridgeUrl}/api/status?mindexecOrigin=pages&cb=${encodeURIComponent(nonce)}`;
+    }
+
+    function rewriteBridgeAssetUrl(url, bridgeUrl) {
+        if (!url || !bridgeUrl) {
+            return url;
+        }
+
+        try {
+            const parsed = new URL(url);
+            if (!isLoopbackHost(parsed.hostname) || !parsed.pathname.startsWith('/assets/')) {
+                return url;
+            }
+
+            return `${bridgeUrl}${parsed.pathname}${parsed.search}${parsed.hash}`;
+        } catch {
+            return url;
+        }
+    }
+
+    async function getBridgeAuthHeaders() {
+        if (!isLocalBridgeAutoProbeAllowed()) {
+            return {};
+        }
+
+        bridgeAuthPromise ??= (async () => {
+            for (const bridgeUrl of getBridgeUrlCandidates()) {
+                try {
+                    const response = await fetch(buildBridgeStatusUrl(bridgeUrl), {
+                        cache: 'no-store',
+                        targetAddressSpace: 'loopback'
+                    });
+                    if (!response.ok) {
+                        continue;
+                    }
+
+                    const status = await response.json();
+                    setActiveBridgeUrl(bridgeUrl);
+                    const token = status?.bridgeToken;
+                    const header = status?.bridgeTokenHeader || 'X-Bridge-Token';
+                    return token ? { [header]: token } : {};
+                } catch {
+                    // Try next loopback spelling.
+                }
+            }
+
+            return {};
+        })();
+
+        return bridgeAuthPromise;
+    }
+
+    async function isBridgeConnected() {
+        if (!isLocalBridgeAutoProbeAllowed()) {
+            return false;
+        }
+
+        bridgeConnectedPromise ??= (async () => {
+            const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+            const timeoutId = controller ? window.setTimeout(() => controller.abort(), 900) : null;
+
+            try {
+                for (const bridgeUrl of getBridgeUrlCandidates()) {
+                    try {
+                        const response = await fetch(buildBridgeStatusUrl(bridgeUrl), {
+                            cache: 'no-store',
+                            signal: controller?.signal,
+                            targetAddressSpace: 'loopback'
+                        });
+                        if (response.ok) {
+                            setActiveBridgeUrl(bridgeUrl);
+                            return true;
+                        }
+                    } catch {
+                        // Try next loopback spelling.
+                    }
+                }
+
+                return false;
+            } finally {
+                if (timeoutId !== null) {
+                    window.clearTimeout(timeoutId);
+                }
+            }
+        })();
+
+        return bridgeConnectedPromise;
+    }
+
+    async function enableHostedLocalBridgeAccessAndProbe() {
+        setHostedLocalBridgeExplicitlyEnabled(true);
+        return await isBridgeConnected();
+    }
+
+    window.MindExecLocalBridge = {
+        ...(window.MindExecLocalBridge || {}),
+        storageKey: HOSTED_LOCAL_BRIDGE_STORAGE_KEY,
+        allowHostedAutoProbe: isHostedLocalBridgeExplicitlyEnabled(),
+        hostedAccessEnabled: isHostedLocalBridgeExplicitlyEnabled(),
+        isHostedAccessEnabled: isHostedLocalBridgeExplicitlyEnabled,
+        enableHostedAccess: () => setHostedLocalBridgeExplicitlyEnabled(true),
+        disableHostedAccess: () => setHostedLocalBridgeExplicitlyEnabled(false),
+        enableHostedAccessAndProbe: enableHostedLocalBridgeAccessAndProbe,
+        activeBridgeUrl
+    };
+
+    async function uploadAssetToBridge(file) {
+        if (!isLocalBridgeAutoProbeAllowed()) {
+            return { success: false };
+        }
+
+        try {
+            const headers = await getBridgeAuthHeaders();
+            for (const bridgeUrl of getBridgeUrlCandidates()) {
+                const formData = new FormData();
+                formData.append('file', file, file.name);
+
+                const response = await fetch(`${bridgeUrl}/api/assets/upload`, {
+                    method: 'POST',
+                    headers,
+                    body: formData,
+                    targetAddressSpace: 'loopback'
+                });
+
+                if (!response.ok) {
+                    continue;
+                }
+
+                const result = await response.json();
+                if (result.success) {
+                    setActiveBridgeUrl(bridgeUrl);
+                    return {
+                        success: true,
+                        url: rewriteBridgeAssetUrl(result.url, bridgeUrl),               // Full HTTP URL for display
+                        relativeUrl: result.relativeUrl, // Relative path for document storage
+                        thumbnailUrl: rewriteBridgeAssetUrl(result.thumbnailUrl, bridgeUrl),
+                        width: result.width,
+                        height: result.height
+                    };
+                }
+            }
+            return { success: false };
+        } catch (err) {
+            console.warn(`[DnD] Bridge upload failed: ${err.message}`);
+            return { success: false };
+        }
+    }
+
+    async function uploadImageToBridge(file) {
+        return uploadAssetToBridge(file);
+    }
+
+    function getDroppedItemForFile(droppedItems, file, index) {
+        const direct = droppedItems?.[index];
+        if (direct?.kind === 'file') {
+            const directFile = typeof direct.getAsFile === 'function' ? direct.getAsFile() : null;
+            if (!directFile
+                || directFile === file
+                || (directFile.name === file.name && directFile.size === file.size && directFile.lastModified === file.lastModified)) {
+                return direct;
+            }
+        }
+
+        for (const item of droppedItems || []) {
+            if (!item || item.kind !== 'file' || typeof item.getAsFile !== 'function') {
+                continue;
+            }
+
+            const itemFile = item.getAsFile();
+            if (itemFile
+                && itemFile.name === file.name
+                && itemFile.size === file.size
+                && itemFile.lastModified === file.lastModified) {
+                return item;
+            }
+        }
+
+        return null;
+    }
+
+    function getBrowserExposedLocalPath(file) {
+        const candidates = [
+            file?.path,
+            file?.fullPath,
+            file?.mozFullPath
+        ];
+
+        for (const candidate of candidates) {
+            const value = String(candidate || '').trim();
+            if (/^[a-z]:[\\/]/i.test(value) || value.startsWith('\\\\') || value.startsWith('/')) {
+                return value;
+            }
+        }
+
+        return '';
+    }
+
+    function rewriteBridgeLocalFileUrl(url, bridgeUrl) {
+        if (!url || !bridgeUrl) {
+            return url;
+        }
+
+        try {
+            const parsed = new URL(url);
+            if (!isLoopbackHost(parsed.hostname) || !parsed.pathname.startsWith('/api/local-files/')) {
+                return url;
+            }
+
+            return `${bridgeUrl}${parsed.pathname}${parsed.search}${parsed.hash}`;
+        } catch {
+            return url;
+        }
+    }
+
+    async function registerLocalFilePathWithBridge(file, localPath) {
+        const normalizedPath = String(localPath || '').trim();
+        if (!normalizedPath || !isLocalBridgeAutoProbeAllowed()) {
+            return { success: false };
+        }
+
+        try {
+            const headers = {
+                ...(await getBridgeAuthHeaders()),
+                'Content-Type': 'application/json'
+            };
+
+            for (const bridgeUrl of getBridgeUrlCandidates()) {
+                const response = await fetch(`${bridgeUrl}/api/local-files/register`, {
+                    method: 'POST',
+                    headers,
+                    body: JSON.stringify({
+                        path: normalizedPath,
+                        fileName: file?.name || '',
+                        size: Number(file?.size || 0),
+                        mime: file?.type || ''
+                    }),
+                    targetAddressSpace: 'loopback'
+                });
+
+                if (!response.ok) {
+                    continue;
+                }
+
+                const result = await response.json();
+                if (result?.success && result?.url) {
+                    setActiveBridgeUrl(bridgeUrl);
+                    return {
+                        success: true,
+                        id: result.id || '',
+                        url: rewriteBridgeLocalFileUrl(result.url, bridgeUrl),
+                        fileName: result.fileName || file?.name || '',
+                        size: Number(result.size || file?.size || 0),
+                        mime: result.mime || file?.type || '',
+                        lastModified: Number(result.lastModified || file?.lastModified || 0)
+                    };
+                }
+            }
+        } catch (error) {
+            console.warn('[DnD] Bridge local file registration failed:', error);
+        }
+
+        return { success: false };
+    }
+
+    async function createLocalVideoReference(file, item, bridgeConnected) {
+        const localPath = getBrowserExposedLocalPath(file);
+        if (bridgeConnected && localPath) {
+            const bridgeResult = await registerLocalFilePathWithBridge(file, localPath);
+            if (bridgeResult.success) {
+                return {
+                    response: bridgeResult.url,
+                    displayUrl: bridgeResult.url,
+                    metadata: {
+                        assetKind: 'video',
+                        sourceKind: 'local-path',
+                        videoMode: 'local_bridge_stream',
+                        storageScope: 'original_file',
+                        persistPolicy: 'reference_only',
+                        localBridgeFileId: bridgeResult.id,
+                        localFilePath: localPath,
+                        fileName: bridgeResult.fileName || file.name || '',
+                        fileSize: String(bridgeResult.size || file.size || 0),
+                        fileMime: bridgeResult.mime || file.type || '',
+                        fileLastModified: String(bridgeResult.lastModified || file.lastModified || 0)
+                    },
+                    saved: true
+                };
+            }
+        }
+
+        const registry = window.MindMapLocalFiles;
+        const entry = registry?.registerDroppedFile
+            ? await registry.registerDroppedFile(file, item)
+            : null;
+        const objectUrl = entry?.objectUrl || URL.createObjectURL(file);
+        const reference = entry?.reference || objectUrl;
+        const sourceKind = entry?.sourceKind || 'session-file';
+        const durableHandle = entry?.durableHandle === true;
+
+        return {
+            response: reference,
+            displayUrl: objectUrl,
+            metadata: {
+                assetKind: 'video',
+                sourceKind,
+                localFileId: entry?.id || '',
+                localFileReference: reference,
+                fileName: file.name || '',
+                fileSize: String(file.size || 0),
+                fileMime: file.type || '',
+                fileLastModified: String(file.lastModified || 0),
+                videoMode: durableHandle ? 'local_handle' : 'session_blob',
+                storageScope: durableHandle ? 'original_file' : 'session',
+                persistPolicy: durableHandle ? 'reference_only' : 'session_only'
+            },
+            saved: true
+        };
+    }
+
+    function showCloudVideoDndBlockedToast(count = 1) {
+        const suffix = count > 1 ? ` (${count} files skipped)` : '';
+        window.MindMapFeedback?.toast?.(`${CLOUD_VIDEO_DND_BLOCKED_MESSAGE}${suffix}`, {
+            kind: 'error',
+            duration: 6800
+        });
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    function fileToDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => reject(reader.error);
+            reader.readAsDataURL(file);
+        });
+    }
+
+    async function handleBrowserImageDrop(module, e, imageUrl) {
+        const finalUrl = await fetchImageAsBlobUrl(imageUrl);
+        if (!finalUrl) {
+            console.log('[MindMapDnD] Image drop cancelled due to CORS/Fetch error.');
+            return;
+        }
+
+        const mouse = {
+            x: (e.clientX / module.container.clientWidth) * 2 - 1,
+            y: -(e.clientY / module.container.clientHeight) * 2 + 1
+        };
+        const vfov = (module.camera.fov * Math.PI) / 180;
+        const viewHeight = 2 * Math.tan(vfov / 2) * module.camera.position.z;
+        const viewWidth = viewHeight * module.camera.aspect;
+        const worldX = module.camera.position.x + (mouse.x * viewWidth) / 2;
+        const worldY = module.camera.position.y + (mouse.y * viewHeight) / 2;
+
+        const size = await measureImageSize(finalUrl);
+
+        const centeredX = worldX - (size.width / 2);
+        const centeredY = worldY + (size.height / 2);
+
+        const finalNode = {
+            TempId: `temp_browser_${Date.now()}`,
+            ContentType: 'image',
+            FileName: 'Web Image',
+            Response: finalUrl,
+            X: module.snapToGrid(centeredX),
+            Y: module.snapToGridY(centeredY),
+            Width: size.width,
+            Height: size.height,
+            IsLoading: false
+        };
+
+        const truncatedUrl = finalUrl.length > 50 ? `${finalUrl.substring(0, 50)}...` : finalUrl;
+
+        try {
+            const actualNodeIdsMap = await module.dotNetHelper.invokeMethodAsync('AddFileNodesFromJs', [finalNode]);
+            const actualId = actualNodeIdsMap?.[finalNode.TempId];
+            if (actualId) {
+                const batchDetails = [{
+                    nodeId: actualId,
+                    fileUrl: finalUrl,
+                    width: size.width,
+                    height: size.height
+                }];
+                await module.dotNetHelper.invokeMethodAsync('UpdateMultipleFileNodeDetails', batchDetails);
+            }
+        } catch (err) {
+            console.error('[MindMapDnD] Failed to add browser image:', err);
+        }
+    }
+
+    async function handleDirectoryDrop(module, handle, e) {
+        console.log('[MindMapDnD] Directory dropped:', handle.name);
+
+        const mouse = {
+            x: (e.clientX / module.container.clientWidth) * 2 - 1,
+            y: -(e.clientY / module.container.clientHeight) * 2 + 1
+        };
+        const vfov = (module.camera.fov * Math.PI) / 180;
+        const viewHeight = 2 * Math.tan(vfov / 2) * module.camera.position.z;
+        const viewWidth = viewHeight * module.camera.aspect;
+        const worldX = module.camera.position.x + (mouse.x * viewWidth) / 2;
+        const worldY = module.camera.position.y + (mouse.y * viewHeight) / 2;
+
+        const centeredX = module.snapToGrid(worldX);
+        const centeredY = module.snapToGridY(worldY);
+
+        try {
+            const nodeId = await module.dotNetHelper.invokeMethodAsync('AddDirectoryNodeFromJs', handle.name, centeredX, centeredY);
+            if (nodeId) {
+                await IDBHelper.set(nodeId, handle);
+                console.log(`[MindMapDnD] Directory handle stored for node ${nodeId}`);
+            }
+        } catch (err) {
+            console.error('[MindMapDnD] Failed to add directory node:', err);
+        }
+    }
+
+    async function onDrop(module, e) {
+        // ▼▼▼ [Profiling] Log drag statistics ▼▼▼
+        const dropTime = performance.now();
+        const totalDragTime = _dragStats.startTime > 0 ? (dropTime - _dragStats.startTime).toFixed(0) : '?';
+        console.log(`[DnD] 🔴 Drop received! dragTime=${totalDragTime}ms, dragOverCount=${_dragStats.dragOverCount}`);
+        // ▲▲▲ [Profiling] ▲▲▲
+
+        // ▼▼▼ [Changed] Prevent duplicate processing ▼▼▼
+        if (e._dndProcessed) {
+            console.log('[MindMapDnD] Drop event already processed, skipping.');
+            return false;
+        }
+        e._dndProcessed = true;
+        // ▲▲▲ [Changed] ▲▲▲
+
+        console.log('[MindMapDnD] Drop event received!');
+
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation(); // Also block other handlers on the same element
+
+        // ▼▼▼ [Critical fix] Capture file lists before starting async work ▼▼▼
+        // e.dataTransfer.files can be cleared by the browser once async work (await) begins.
+        const droppedFiles = e.dataTransfer.files ? Array.from(e.dataTransfer.files) : [];
+        const droppedItems = e.dataTransfer.items ? Array.from(e.dataTransfer.items) : [];
+        // ▲▲▲ [Critical fix] ▲▲▲
+
+        // 1. Directory handling (FileSystem API)
+        // (Note: droppedFiles is already copied into memory, so it's safe even with await.)
+        // [Optimized] If all files are already supported (image, PDF, etc.), skip directory checks
+        // (async handle requests) to avoid delay.
+        let shouldCheckDirectory = false;
+        if (droppedFiles.length === 0) {
+            // If the file list is empty (pure folder drop, etc.), we need to check
+            shouldCheckDirectory = true;
+        } else {
+            // If any file is not recognized (no extension, etc. => possibly a folder), check
+            const sortedRegistry = window.MindMapFileRegistry; // Registry is global usage
+            for (let droppedFileIndex = 0; droppedFileIndex < droppedFiles.length; droppedFileIndex++) {
+                const file = droppedFiles[droppedFileIndex];
+                let isKnown = false;
+                for (const handler of sortedRegistry) {
+                    if (handler.check(file)) {
+                        isKnown = true;
+                        break;
+                    }
+                }
+                if (!isKnown) {
+                    shouldCheckDirectory = true;
+                    break;
+                }
+            }
+        }
+
+        // ▼▼▼ [Profiling] Measure directory-check time ▼▼▼
+        const dirCheckStart = performance.now();
+
+        if (shouldCheckDirectory && droppedItems.length > 0) {
+            console.log('[DnD] 📁 Checking for directory drop...');
+            for (const item of droppedItems) {
+                // webkitGetAsEntry (sync / non-standard) vs getAsFileSystemHandle (async / standard)
+                // getAsFileSystemHandle can be slow, so apply a timeout
+                if (item.kind === 'file' && typeof item.getAsFileSystemHandle === 'function') {
+                    try {
+                        // ▼▼▼ [Optimization] 500ms timeout to avoid blocking directory checks ▼▼▼
+                        const handlePromise = item.getAsFileSystemHandle();
+                        const timeoutPromise = new Promise((_, reject) =>
+                            setTimeout(() => reject(new Error('Timeout')), 500)
+                        );
+
+                        const handle = await Promise.race([handlePromise, timeoutPromise]);
+                        // ▲▲▲ [Optimization] ▲▲▲
+
+                        if (handle && handle.kind === 'directory') {
+                            console.log(`[DnD] 📁 Directory detected in ${(performance.now() - dirCheckStart).toFixed(0)}ms`);
+                            await handleDirectoryDrop(module, handle, e);
+                            return false;
+                        }
+                    } catch (err) {
+                        // If timeout/failure, skip quietly and continue as file handling
+                        console.warn(`[DnD] Directory check skipped: ${err.message}`);
+                    }
+                }
+            }
+        }
+        console.log(`[DnD] 📁 Directory check completed in ${(performance.now() - dirCheckStart).toFixed(0)}ms`);
+        // ▲▲▲ [Profiling] ▲▲▲
+
+        // 2. Regular file handling (use captured droppedFiles)
+        if (droppedFiles.length > 0) {
+            const timeLabel = `[DnD] Process_${Date.now()}`;
+            console.time(timeLabel);
+
+            // Debug: Log all dropped files
+            console.log(`[DnD] 📂 Dropped ${droppedFiles.length} files:`);
+            droppedFiles.forEach((f, i) => console.log(`  [${i}] ${f.name} (type: ${f.type || 'unknown'}, size: ${f.size})`));
+
+            const matchedFiles = [];
+            const filesToProcess = [];
+            const sortedRegistry = [...window.MindMapFileRegistry].sort((a, b) => (a.priority ?? 50) - (b.priority ?? 50));
+
+            for (let droppedFileIndex = 0; droppedFileIndex < droppedFiles.length; droppedFileIndex++) {
+                const file = droppedFiles[droppedFileIndex];
+                let matchedType = null;
+                for (const handler of sortedRegistry) {
+                    if (handler.check(file)) {
+                        matchedType = handler.getType(file);
+                        break;
+                    }
+                }
+                if (matchedType) {
+                    matchedFiles.push({
+                        file,
+                        type: matchedType,
+                        item: getDroppedItemForFile(droppedItems, file, droppedFileIndex)
+                    });
+                } else {
+                    console.warn(`[DnD] ⚠️ No handler matched for: ${file.name} (type: ${file.type})`);
+                }
+            }
+
+            const bridgeConnected = !window.__isNativeApp && await isBridgeConnected();
+            let blockedVideoCount = 0;
+            for (const entry of matchedFiles) {
+                if (entry.type === 'video' && !window.__isNativeApp && !bridgeConnected) {
+                    blockedVideoCount++;
+                    console.warn(`[DnD] Blocked local video DnD in cloud mode: ${entry.file.name}`);
+                    continue;
+                }
+
+                filesToProcess.push(entry);
+            }
+
+            if (blockedVideoCount > 0) {
+                showCloudVideoDndBlockedToast(blockedVideoCount);
+            }
+
+            if (filesToProcess.length === 0) {
+                console.timeEnd(timeLabel);
+                console.log('[MindMapDnD] No matching file handlers found. Checking for web images...');
+            } else {
+                const mouse = {
+                    x: (e.clientX / module.container.clientWidth) * 2 - 1,
+                    y: -(e.clientY / module.container.clientHeight) * 2 + 1
+                };
+                const vfov = (module.camera.fov * Math.PI) / 180;
+                const viewHeight = 2 * Math.tan(vfov / 2) * module.camera.position.z;
+                const viewWidth = viewHeight * module.camera.aspect;
+                const worldX = module.camera.position.x + (mouse.x * viewWidth) / 2;
+                const worldY = module.camera.position.y + (mouse.y * viewHeight) / 2;
+
+                // ▼▼▼ [Optimization] Batch processing to prevent UI blocking ▼▼▼
+                const BATCH_SIZE = 5; // Process 5 files at a time
+                const preparedNodes = [];
+
+                // Helper to yield to main thread
+                const yieldToMain = () => new Promise(resolve => setTimeout(resolve, 0));
+
+                // ▼▼▼ [Fix] Track cumulative X offset for proper spacing ▼▼▼
+                const NODE_GAP = 30;
+                // ▲▲▲ [Fix] ▲▲▲
+
+                // Process files in batches
+                for (let batchStart = 0; batchStart < filesToProcess.length; batchStart += BATCH_SIZE) {
+                    const batchEnd = Math.min(batchStart + BATCH_SIZE, filesToProcess.length);
+                    const batch = filesToProcess.slice(batchStart, batchEnd);
+
+                    const batchResults = await Promise.all(batch.map(async ({ file, type, item }, batchIndex) => {
+                        const index = batchStart + batchIndex;
+                        const tempId = `temp_${Date.now()}_${index}`;
+
+                        let finalResponse = '';
+                        let displayUrl = ''; // For JS image loading
+                        let finalWidth = module.aiNodeDefaultWidth || 470;
+                        let finalHeight = module.aiNodeDefaultHeight || 350;
+                        let isLoading = false;
+                        const fileIndex = index;
+                        let imageSaved = false; // Track if image was already saved
+                        let videoSaved = false;
+                        let metadata = null;
+
+                        if (type === 'image') {
+                            const isAnimatedGif = file.type === 'image/gif' || /\.gif$/i.test(file.name || '');
+                            if (isAnimatedGif) {
+                                metadata = {
+                                    assetKind: 'image',
+                                    fileName: file.name || '',
+                                    fileSize: String(file.size || 0),
+                                    fileMime: file.type || 'image/gif',
+                                    fileLastModified: String(file.lastModified || ''),
+                                    isAnimatedGif: 'true'
+                                };
+                            }
+                            // ▼▼▼ [Optimization] Direct Bridge upload (fastest path) ▼▼▼
+                            console.log(`[DnD] Processing image ${index + 1}: ${file.name}`);
+
+                            // Try Bridge direct upload first (bypasses C# entirely)
+                            if (bridgeConnected) {
+                                const localSizingUrl = URL.createObjectURL(file);
+                                const measuredSizePromise = measureImageSize(localSizingUrl).catch((err) => {
+                                    console.warn(`[DnD] Image ${index + 1} local measure failed: ${err?.message || err}`);
+                                    return null;
+                                });
+
+                                const bridgeResult = await uploadImageToBridge(file);
+                                const measuredSize = await measuredSizePromise;
+                                if (bridgeResult.success) {
+                                    displayUrl = bridgeResult.url;           // HTTP URL for display
+                                    finalResponse = bridgeResult.relativeUrl; // Relative path for storage
+                                    if (isAnimatedGif && metadata) {
+                                        metadata.OriginalPath = bridgeResult.relativeUrl || '';
+                                    }
+
+                                    const imageNodeSize = measuredSize || computeDroppedImageNodeSize(
+                                        bridgeResult.width || 0,
+                                        bridgeResult.height || 0
+                                    );
+                                    finalWidth = imageNodeSize.width;
+                                    finalHeight = imageNodeSize.height;
+
+                                    URL.revokeObjectURL(localSizingUrl);
+                                    imageSaved = true; // Already saved by Bridge
+                                    console.log(`[DnD] ✓ Bridge saved: ${file.name} -> ${bridgeResult.relativeUrl} (${finalWidth}x${finalHeight})`);
+                                } else {
+                                    // Fallback to Blob URL + background save
+                                    const size = measuredSize || computeDroppedImageNodeSize(470, 350);
+                                    displayUrl = localSizingUrl;
+                                    finalResponse = localSizingUrl;
+                                    finalWidth = size.width;
+                                    finalHeight = size.height;
+                                    imageSaved = false;
+                                }
+                            } else {
+                                // MAUI/Native: use Blob URL + background save via C#
+                                try {
+                                    const sizingUrl = URL.createObjectURL(file);
+                                    const size = await measureImageSize(sizingUrl);
+                                    displayUrl = sizingUrl;
+                                    finalResponse = sizingUrl;
+                                    finalWidth = size.width;
+                                    finalHeight = size.height;
+                                    imageSaved = false;
+                                } catch (err) {
+                                    console.warn(`[DnD] Image ${index + 1} measure failed: ${err.message}`);
+                                    displayUrl = URL.createObjectURL(file);
+                                    finalResponse = displayUrl;
+                                    const fallbackSize = computeDroppedImageNodeSize(470, 350);
+                                    finalWidth = fallbackSize.width;
+                                    finalHeight = fallbackSize.height;
+                                    imageSaved = false;
+                                }
+                            }
+                            // ▲▲▲ [Optimization] ▲▲▲
+                            isLoading = false;
+                        } else if (type === 'video') {
+                            console.log(`[DnD] Processing video ${index + 1}: ${file.name}`);
+                            finalWidth = 470;
+                            finalHeight = 264;
+                            const localReference = await createLocalVideoReference(file, item, bridgeConnected);
+                            displayUrl = localReference.displayUrl;
+                            finalResponse = localReference.response;
+                            metadata = localReference.metadata;
+                            videoSaved = localReference.saved === true;
+
+                            // Legacy asset-copy path is intentionally unreachable for videos.
+                            if (false && bridgeConnected) {
+                                const bridgeResult = await uploadAssetToBridge(file);
+                                if (bridgeResult.success) {
+                                    displayUrl = bridgeResult.url;
+                                    finalResponse = bridgeResult.relativeUrl;
+                                    videoSaved = true;
+                                    console.log(`[DnD] ✓ Bridge saved video: ${file.name} -> ${bridgeResult.relativeUrl}`);
+                                }
+                            }
+
+                            if (!videoSaved) {
+                                displayUrl = window.__isNativeApp ? await fileToDataUrl(file) : URL.createObjectURL(file);
+                                finalResponse = displayUrl;
+                            }
+
+                            isLoading = false;
+                        } else if (type === 'text') {
+                            finalResponse = '⏳ Analyzing file...';
+                            displayUrl = finalResponse;
+                            isLoading = true;
+                        } else if (type === 'code') {
+                            // ▼▼▼ [New] Code files: Troika-rendered, load content immediately ▼▼▼
+                            finalResponse = '⏳ Loading source code...';
+                            displayUrl = finalResponse;
+                            finalWidth = module.aiNodeDefaultWidth || 470;
+                            finalHeight = 400; // Taller default for code
+                            isLoading = true;
+                            // ▲▲▲ [New] ▲▲▲
+                        } else if (type === 'pdf') {
+                            finalResponse = window.__isNativeApp ? await fileToDataUrl(file) : URL.createObjectURL(file);
+                            displayUrl = finalResponse;
+                            finalWidth = module.aiNodeDefaultWidth || 470;
+                            finalHeight = 56;
+                        }
+
+                        // X, Y will be recalculated after all dimensions are known
+                        const tempX = 0;
+                        const tempY = 0;
+
+                        return {
+                            TempId: tempId,
+                            ContentType: type,
+                            FileName: file.name,
+                            Response: finalResponse,       // For C# storage
+                            DisplayUrl: displayUrl,        // For JS display
+                            FileIndex: fileIndex,
+                            X: tempX,
+                            Y: tempY,
+                            Width: finalWidth,
+                            Height: finalHeight,
+                            IsLoading: isLoading,
+                            ImageSaved: imageSaved, // Flag to skip background save
+                            VideoSaved: videoSaved,
+                            Metadata: metadata
+                        };
+                    }));
+
+                    preparedNodes.push(...batchResults.filter(n => n !== null));
+
+                    // Yield to main thread after each batch to prevent UI freeze
+                    if (batchEnd < filesToProcess.length) {
+                        await yieldToMain();
+                    }
+
+                    console.log(`[DnD] Prepared batch ${Math.floor(batchStart / BATCH_SIZE) + 1}/${Math.ceil(filesToProcess.length / BATCH_SIZE)}`);
+                }
+                // ▲▲▲ [Optimization] ▲▲▲
+
+                const nodesToSend = preparedNodes.filter(n => n !== null);
+
+                // ▼▼▼ [Fix] Recalculate X positions based on node widths + gap ▼▼▼
+                if (nodesToSend.length > 0) {
+                    let nextLeftX = worldX - (nodesToSend[0].Width / 2);
+                    for (const node of nodesToSend) {
+                        const centeredY = worldY + (node.Height / 2);
+                        node.X = module.snapToGrid(nextLeftX);
+                        node.Y = module.snapToGridY(centeredY);
+                        nextLeftX = node.X + node.Width + NODE_GAP;
+                    }
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+
+                if (nodesToSend.length > 0) {
+                    // 1. Get ID mapping from C# (batch call)
+                    const t4 = performance.now();
+                    const actualNodeIdsMap = await module.dotNetHelper.invokeMethodAsync('AddFileNodesFromJs', nodesToSend);
+                    const t5 = performance.now();
+                    console.log(`[DnD] AddFileNodesFromJs: ${(t5 - t4).toFixed(1)}ms for ${nodesToSend.length} nodes`);
+
+                    // ▼▼▼ [Optimization] Add nodes to JS in batches to prevent UI blocking ▼▼▼
+                    const nodesToAdd = nodesToSend.map(dto => ({
+                        id: actualNodeIdsMap[dto.TempId],
+                        contentType: dto.ContentType,
+                        prompt: dto.FileName,
+                        response: dto.DisplayUrl || dto.Response, // Use DisplayUrl for images (HTTP URL)
+                        positionX: dto.X,
+                        positionY: dto.Y,
+                        positionZ: 0,
+                        width: dto.Width,
+                        height: dto.Height,
+                        isLoading: false,
+                        metadata: dto.Metadata || {}
+                    }));
+
+                    const JS_BATCH_SIZE = 10;
+                    const t5b = performance.now();
+                    for (let i = 0; i < nodesToAdd.length; i += JS_BATCH_SIZE) {
+                        const batch = nodesToAdd.slice(i, i + JS_BATCH_SIZE);
+                        await window.mindMap.addNodes(batch);
+
+                        // Yield to main thread between batches
+                        if (i + JS_BATCH_SIZE < nodesToAdd.length) {
+                            await yieldToMain();
+                        }
+                    }
+                    const t5c = performance.now();
+                    console.log(`[DnD] JS addNodes: ${(t5c - t5b).toFixed(1)}ms for ${nodesToAdd.length} nodes`);
+                    // ▲▲▲ [Optimization] ▲▲▲
+
+                    // 2. Stream text files (BATCH PROCESSING to prevent Render Storm)
+                    // ▼▼▼ [Optimization] Batch text file processing ▼▼▼
+                    const textNodesToProcess = nodesToSend.filter(n => n.IsLoading && n.ContentType !== 'image');
+
+                    if (textNodesToProcess.length > 0) {
+                        console.log(`[DnD] 📄 Batch processing ${textNodesToProcess.length} text files...`);
+
+                        // Prepare all stream references at once
+                        const textFileStreams = [];
+                        for (const nodeDto of textNodesToProcess) {
+                            const realNodeId = actualNodeIdsMap?.[nodeDto.TempId];
+                            if (!realNodeId) continue;
+
+                            const originalEntry = filesToProcess[nodeDto.FileIndex];
+                            if (!originalEntry) continue;
+
+                            try {
+                                const streamRef = DotNet.createJSStreamReference(originalEntry.file);
+                                textFileStreams.push({
+                                    nodeId: realNodeId,
+                                    fileName: nodeDto.FileName,
+                                    streamRef: streamRef
+                                });
+                            } catch (err) {
+                                console.error(`[DnD] Failed to create stream ref for ${nodeDto.FileName}:`, err);
+                            }
+                        }
+
+                        // Single batch call to C# (prevents N individual StateHasChanged calls)
+                        if (textFileStreams.length > 0) {
+                            try {
+                                const t6a = performance.now();
+                                await module.dotNetHelper.invokeMethodAsync(
+                                    'IngestMultipleTextFilesDirectly',
+                                    textFileStreams
+                                );
+                                const t6b = performance.now();
+                                console.log(`[DnD] ✅ Batch text processing: ${(t6b - t6a).toFixed(1)}ms for ${textFileStreams.length} files`);
+                            } catch (err) {
+                                console.error('[DnD] Batch text processing failed, falling back to individual:', err);
+                                // Fallback to individual processing
+                                for (const stream of textFileStreams) {
+                                    try {
+                                        await module.dotNetHelper.invokeMethodAsync(
+                                            'IngestFileStreamDirectly',
+                                            stream.streamRef,
+                                            stream.nodeId,
+                                            stream.fileName
+                                        );
+                                    } catch (e) {
+                                        console.error(`[DnD] Individual stream error for ${stream.fileName}:`, e);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    // ▲▲▲ [Optimization] ▲▲▲
+
+                    // ▼▼▼ [Optimization] Save images in background (Blob URL displayed immediately) ▼▼▼
+                    const imageNodesToSave = nodesToSend.filter(n => n.ContentType === 'image' && !n.ImageSaved);
+                    if (imageNodesToSave.length > 0) {
+                        console.log(`[DnD] 🔄 Starting background save for ${imageNodesToSave.length} images...`);
+                        // Fire-and-forget: start sequential image saving in background
+                        (async () => {
+                            for (let i = 0; i < imageNodesToSave.length; i++) {
+                                const nodeDto = imageNodesToSave[i];
+                                const realNodeId = actualNodeIdsMap?.[nodeDto.TempId];
+                                if (!realNodeId) continue;
+
+                                const originalEntry = filesToProcess[nodeDto.FileIndex];
+                                if (!originalEntry) continue;
+
+                                try {
+                                    const streamRef = DotNet.createJSStreamReference(originalEntry.file);
+                                    await module.dotNetHelper.invokeMethodAsync(
+                                        'SaveImageStreamBackground',
+                                        streamRef,
+                                        realNodeId,
+                                        nodeDto.FileName
+                                    );
+
+                                    if ((i + 1) % 10 === 0) {
+                                        console.log(`[DnD] Fallback saved ${i + 1}/${imageNodesToSave.length} images`);
+                                    }
+                                } catch (err) {
+                                    console.warn('[DnD] Image save error:', err);
+                                }
+                            }
+                            console.log(`[DnD] ✅ Background saved ${imageNodesToSave.length} images to assets`);
+                        })();
+                    } else {
+                        const totalImages = nodesToSend.filter(n => n.ContentType === 'image').length;
+                        if (totalImages > 0) {
+                            console.log(`[DnD] ✅ All ${totalImages} images already saved via SaveImageAndGetInfo`);
+                        }
+                    }
+                    // ▲▲▲ [Optimization] ▲▲▲
+
+                    const videoNodesToSave = nodesToSend.filter(n => n.ContentType === 'video' && !n.VideoSaved);
+                    if (videoNodesToSave.length > 0) {
+                        console.log(`[DnD] 🔄 Starting background save for ${videoNodesToSave.length} videos...`);
+                        (async () => {
+                            for (let i = 0; i < videoNodesToSave.length; i++) {
+                                const nodeDto = videoNodesToSave[i];
+                                const realNodeId = actualNodeIdsMap?.[nodeDto.TempId];
+                                if (!realNodeId) continue;
+
+                                const originalEntry = filesToProcess[nodeDto.FileIndex];
+                                if (!originalEntry) continue;
+
+                                try {
+                                    const streamRef = DotNet.createJSStreamReference(originalEntry.file);
+                                    await module.dotNetHelper.invokeMethodAsync(
+                                        'SaveVideoStreamBackground',
+                                        streamRef,
+                                        realNodeId,
+                                        nodeDto.FileName
+                                    );
+                                } catch (err) {
+                                    console.warn('[DnD] Video save error:', err);
+                                }
+                            }
+                            console.log(`[DnD] ✅ Background saved ${videoNodesToSave.length} videos to assets`);
+                        })();
+                    }
+
+                    // 3. Update PDF URL only (images were already added in JS)
+                    // ▼▼▼ [Changed] Images already handled in JS addNodes; update PDFs only ▼▼▼
+                    const batchDetails = nodesToSend
+                        .map(node => {
+                            const nodeId = actualNodeIdsMap?.[node.TempId];
+                            if (!nodeId) return null;
+                            // Images and text have already been handled
+                            if (node.ContentType === 'image') return null;
+                            if (node.ContentType === 'video') return null;
+                            if (node.IsLoading) return null; // text still loading
+
+                            return {
+                                nodeId: nodeId,
+                                fileUrl: node.Response,
+                                width: node.Width,
+                                height: node.Height
+                            };
+                        })
+                        .filter(detail => detail !== null);
+
+                    // Execute all work in parallel
+                    // ▼▼▼ [Profiling] Post-processing time ▼▼▼
+                    const t6 = performance.now();
+                    await Promise.all([
+                        batchDetails.length > 0 ? module.dotNetHelper.invokeMethodAsync('UpdateMultipleFileNodeDetails', batchDetails) : Promise.resolve()
+                    ]);
+                    const t7 = performance.now();
+                    console.log(`[DnD] UpdateMultipleFileNodeDetails: ${(t7 - t6).toFixed(1)}ms`);
+                    // ▲▲▲ [Profiling] ▲▲▲
+                }
+
+                console.timeEnd(timeLabel);
+                return false;
+            }
+        }
+
+        // 3. Web resource (URL) handling
+        const imageUrl = extractImageUrl(e.dataTransfer);
+        console.log(`[DnD] extractImageUrl result: ${imageUrl ? imageUrl.substring(0, 50) + '...' : 'null'}`);
+        const isWebResource = imageUrl && (imageUrl.startsWith('http') || imageUrl.startsWith('data:'));
+        if (isWebResource) {
+            console.log('[DnD] Processing as web resource (should NOT happen if file was processed)');
+            await handleBrowserImageDrop(module, e, imageUrl);
+            return false;
+        }
+
+        const droppedUrl = extractDroppedUrl(e.dataTransfer);
+        if (droppedUrl && /^https?:\/\//i.test(droppedUrl)) {
+            const mouse = {
+                x: (e.clientX / module.container.clientWidth) * 2 - 1,
+                y: -(e.clientY / module.container.clientHeight) * 2 + 1
+            };
+            const vfov = (module.camera.fov * Math.PI) / 180;
+            const viewHeight = 2 * Math.tan(vfov / 2) * module.camera.position.z;
+            const viewWidth = viewHeight * module.camera.aspect;
+            const worldX = module.camera.position.x + (mouse.x * viewWidth) / 2;
+            const worldY = module.camera.position.y + (mouse.y * viewHeight) / 2;
+
+            await module.dotNetHelper?.invokeMethodAsync(
+                'AddUrlNodeFromJs',
+                droppedUrl,
+                module.snapToGrid(worldX - 230),
+                module.snapToGridY(worldY + 130)
+            );
+            return false;
+        }
+
+        // ▼▼▼ [Profiling] Drop handling complete ▼▼▼
+        const totalProcessTime = performance.now() - dropTime;
+        console.log(`[DnD] ✅ Drop processing completed in ${totalProcessTime.toFixed(0)}ms`);
+        // ▲▲▲ [Profiling] ▲▲▲
+
+        return false;
+    }
+
+    return {
+        addEventListeners: function (moduleInstance) {
+            // ▼▼▼ [Changed] Prevent duplicate registration ▼▼▼
+            if (moduleInstance._dndListenersAttached) {
+                console.log('[MindMapDnD] Event listeners already attached, skipping.');
+                return;
+            }
+            // ▲▲▲ [Changed] ▲▲▲
+
+            // ▼▼▼ [New] Disable JS drag listeners in MAUI native app ▼▼▼
+            // C# NativeDropService handles it to avoid IPC bottlenecks and duplicated UI.
+            if (window.__isNativeApp === true) {
+                console.log('[MindMapDnD] Native app detected - JS drag handlers DISABLED (C# handles drop).');
+                moduleInstance._dndListenersAttached = true;
+                return;
+            }
+            // ▲▲▲ [New] ▲▲▲
+
+            const handlers = getBoundHandlers(moduleInstance);
+            if (moduleInstance.container) {
+                moduleInstance.container.addEventListener('dragenter', handlers.boundOnDragEnter); // [New]
+                moduleInstance.container.addEventListener('dragover', handlers.boundOnDragOver);
+                moduleInstance.container.addEventListener('dragleave', handlers.boundOnDragLeave);
+                moduleInstance.container.addEventListener('drop', handlers.boundOnDrop);
+                moduleInstance._dndListenersAttached = true;
+                console.log('[MindMapDnD] Event listeners attached to container.');
+            }
+        },
+        removeEventListeners: function (moduleInstance) {
+            const handlers = getBoundHandlers(moduleInstance);
+            if (moduleInstance.container) {
+                moduleInstance.container.removeEventListener('dragenter', handlers.boundOnDragEnter); // [New]
+                moduleInstance.container.removeEventListener('dragover', handlers.boundOnDragOver);
+                moduleInstance.container.removeEventListener('dragleave', handlers.boundOnDragLeave);
+                moduleInstance.container.removeEventListener('drop', handlers.boundOnDrop);
+            }
+            moduleInstance._dndListenersAttached = false;
+            eventHandlers.delete(moduleInstance);
+        },
+        IDBHelper: IDBHelper
+    };
+})();
+console.log('✓ mind-map-dnd.js loaded (Fixed: Async DataTransfer Safety + Text Support).');