@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/mind-map-multi-select.js

@@ -0,0 +1,1716 @@
+// File: wwwroot/js/mind-map-multi-select.js
+// Multi-image selection bounding box and layout management
+(function () {
+    'use strict';
+
+    let _module = null;
+    let multiSelectOverlay = null;
+    let multiSelectMenu = null;
+    let singleImageOverlay = null;
+    let currentBounds = null;
+    let isResizing = false;
+    let resizeHandle = null;
+    let resizeStartBounds = null;
+    let resizeStartMouse = null;
+    let initialNodeSizes = new Map(); // Store initial sizes for proportional scaling
+
+    const SINGLE_IMAGE_HANDLE_SIZE = 10;
+    const MULTI_SELECT_SCREEN_PADDING_PX = 10;
+
+    // ▼▼▼ [Perf] Throttling and caching for drag performance ▼▼▼
+    const UPDATE_THROTTLE_MS = 32; // ~30fps for overlay updates during drag
+    let lastUpdateTime = 0;
+    let cachedImageNodeIds = null; // Cached list of selected image node IDs
+    let isDragging = false; // Derived from module.isDraggingMultipleNodes
+    // ▲▲▲ [Perf] ▲▲▲
+
+    function setBrowserSelectionLock(active, reason) {
+        if (window.MindMapInteractions?.setBrowserSelectionLock) {
+            window.MindMapInteractions.setBrowserSelectionLock(active, reason || 'multi-select-resize');
+            return;
+        }
+
+        document?.body?.classList?.toggle?.('mindcanvas-browser-selection-locked', !!active);
+        document?.documentElement?.classList?.toggle?.('mindcanvas-browser-selection-locked', !!active);
+    }
+
+    function init(module) {
+        _module = module;
+        createMultiSelectOverlay();
+        createSingleImageOverlay();
+    }
+
+    function createMultiSelectOverlay() {
+        if (multiSelectOverlay?.isConnected) return;
+
+        // Create overlay container (absolutely positioned in 3D space via CSS3DObject)
+        multiSelectOverlay = document.createElement('div');
+        multiSelectOverlay.className = 'multi-select-overlay';
+        multiSelectOverlay.style.cssText = `
+            position: fixed;
+            pointer-events: none;
+            border: 2px dashed #2563eb;
+            background: rgba(37, 99, 235, 0.05);
+            border-radius: 8px;
+            display: none;
+            z-index: 1000;
+        `;
+
+        // Create resize handles (corners)
+        const corners = ['nw', 'ne', 'sw', 'se'];
+        corners.forEach(corner => {
+            const handle = document.createElement('div');
+            handle.className = `resize-handle-${corner}`;
+            handle.dataset.corner = corner;
+            handle.style.cssText = `
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                background: #2563eb;
+                border: 2px solid white;
+                border-radius: 3px;
+                cursor: ${corner}-resize;
+                pointer-events: auto;
+            `;
+            // Position based on corner
+            if (corner.includes('n')) handle.style.top = '-6px';
+            if (corner.includes('s')) handle.style.bottom = '-6px';
+            if (corner.includes('w')) handle.style.left = '-6px';
+            if (corner.includes('e')) handle.style.right = '-6px';
+
+            handle.addEventListener('mousedown', onResizeStart);
+            multiSelectOverlay.appendChild(handle);
+        });
+
+        // Create multi-select menu
+        multiSelectMenu = document.createElement('div');
+        multiSelectMenu.className = 'multi-select-menu';
+        multiSelectMenu.style.cssText = `
+            position: absolute;
+            top: -35px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(4px);
+            padding: 4px 6px;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
+            pointer-events: auto;
+        `;
+
+        // Menu buttons will be populated dynamically based on selection
+        // Initial empty menu - will be updated by updateMenuButtons()
+
+        multiSelectOverlay.appendChild(multiSelectMenu);
+
+        // Append to body (will be positioned in screen space)
+        document.body.appendChild(multiSelectOverlay);
+    }
+
+    function createSingleImageOverlay() {
+        if (singleImageOverlay?.isConnected) return;
+
+        singleImageOverlay = document.createElement('div');
+        singleImageOverlay.className = 'single-image-selection-overlay';
+        singleImageOverlay.style.cssText = `
+            position: fixed;
+            pointer-events: none;
+            background: transparent;
+            box-sizing: border-box;
+            outline: 1px dashed #2563eb;
+            outline-offset: 1px;
+            display: none;
+            visibility: hidden;
+            z-index: 999;
+        `;
+
+        const corners = ['nw', 'ne', 'sw', 'se'];
+        const handleOffset = SINGLE_IMAGE_HANDLE_SIZE / 2;
+        corners.forEach(corner => {
+            const handle = document.createElement('div');
+            handle.className = `single-image-selection-handle-${corner}`;
+            handle.style.cssText = `
+                position: absolute;
+                width: ${SINGLE_IMAGE_HANDLE_SIZE}px;
+                height: ${SINGLE_IMAGE_HANDLE_SIZE}px;
+                background: #2563eb;
+                pointer-events: none;
+            `;
+
+            if (corner.includes('n')) handle.style.top = `${-handleOffset}px`;
+            if (corner.includes('s')) handle.style.bottom = `${-handleOffset}px`;
+            if (corner.includes('w')) handle.style.left = `${-handleOffset}px`;
+            if (corner.includes('e')) handle.style.right = `${-handleOffset}px`;
+
+            singleImageOverlay.appendChild(handle);
+        });
+
+        document.body.appendChild(singleImageOverlay);
+    }
+
+    // Resize move/end are handled by MindMapInteractions (centralized)
+
+    function showMultiSelectBounds(selectedImageNodeIds) {
+        if (!_module || selectedImageNodeIds.length < 2) {
+            hide();
+            return;
+        }
+
+        // Calculate bounding box of selected nodes
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        selectedImageNodeIds.forEach(nodeId => {
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (!nodeEntry) return;
+
+            const obj = nodeEntry.glObject || nodeEntry.cssObject;
+            if (!obj) return;
+
+            const model = nodeEntry.model;
+            const x = obj.position.x;
+            const y = obj.position.y;
+            const w = model.width || 200;
+            const h = model.height || 200;
+
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x + w);
+            minY = Math.min(minY, y - h); // Note: y is top, y-h is bottom in our coord system
+            maxY = Math.max(maxY, y);
+        });
+
+        if (minX === Infinity) {
+            hide();
+            return;
+        }
+
+        // Add padding
+        const padding = 10;
+        minX -= padding;
+        minY -= padding;
+        maxX += padding;
+        maxY += padding;
+
+        currentBounds = { minX, minY, maxX, maxY };
+
+        // Store initial node sizes for proportional scaling
+        initialNodeSizes.clear();
+        selectedImageNodeIds.forEach(nodeId => {
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (nodeEntry) {
+                const obj = nodeEntry.glObject || nodeEntry.cssObject;
+                if (obj) {
+                    initialNodeSizes.set(nodeId, {
+                        x: obj.position.x,
+                        y: obj.position.y,
+                        width: nodeEntry.model.width || 200,
+                        height: nodeEntry.model.height || 200
+                    });
+                }
+            }
+        });
+
+        // Convert node bounds to screen coordinates
+        updateOverlayPosition(selectedImageNodeIds);
+        multiSelectOverlay.style.display = 'block';
+        multiSelectOverlay.style.visibility = 'visible';
+    }
+
+    function getNodeScreenRect(nodeEntry) {
+        if (!nodeEntry || !_module) return null;
+
+        if (nodeEntry.currentType === 'CSS') {
+            const element = nodeEntry.cssObject?.element;
+            if (element?.isConnected) {
+                const rect = element.getBoundingClientRect();
+                if (Number.isFinite(rect.width) && Number.isFinite(rect.height) && rect.width > 0 && rect.height > 0) {
+                    return {
+                        left: rect.left,
+                        top: rect.top,
+                        right: rect.right,
+                        bottom: rect.bottom
+                    };
+                }
+            }
+        }
+
+        const obj = nodeEntry.glObject || nodeEntry.cssObject;
+        if (!obj || !_module.camera || !_module.container) return null;
+
+        const width = Math.max(1, Number(obj.userData?.worldWidth || nodeEntry.model?.width || 0) || 1);
+        const height = Math.max(1, Number(obj.userData?.worldHeight || nodeEntry.model?.height || 0) || 1);
+        const topLeft = worldToScreen(obj.position.x, obj.position.y, _module.camera, _module.container);
+        const bottomRight = worldToScreen(obj.position.x + width, obj.position.y - height, _module.camera, _module.container);
+        const left = Math.min(topLeft.x, bottomRight.x);
+        const top = Math.min(topLeft.y, bottomRight.y);
+        const right = Math.max(topLeft.x, bottomRight.x);
+        const bottom = Math.max(topLeft.y, bottomRight.y);
+
+        if (![left, top, right, bottom].every(Number.isFinite)) return null;
+
+        return { left, top, right, bottom };
+    }
+
+    function applyOverlayRect(left, top, right, bottom) {
+        multiSelectOverlay.style.left = `${left}px`;
+        multiSelectOverlay.style.top = `${top}px`;
+        multiSelectOverlay.style.width = `${Math.max(0, right - left)}px`;
+        multiSelectOverlay.style.height = `${Math.max(0, bottom - top)}px`;
+    }
+
+    function updateOverlayPosition(selectedNodeIds = null, forceWorldProjection = false) {
+        if (!currentBounds || !_module || !_module.camera || !_module.container) return;
+
+        if (!forceWorldProjection && Array.isArray(selectedNodeIds) && selectedNodeIds.length > 0) {
+            let minLeft = Infinity;
+            let minTop = Infinity;
+            let maxRight = -Infinity;
+            let maxBottom = -Infinity;
+
+            selectedNodeIds.forEach(nodeId => {
+                const rect = getNodeScreenRect(_module.nodeObjectsById.get(nodeId));
+                if (!rect) return;
+
+                minLeft = Math.min(minLeft, rect.left);
+                minTop = Math.min(minTop, rect.top);
+                maxRight = Math.max(maxRight, rect.right);
+                maxBottom = Math.max(maxBottom, rect.bottom);
+            });
+
+            if (minLeft !== Infinity) {
+                applyOverlayRect(
+                    minLeft - MULTI_SELECT_SCREEN_PADDING_PX,
+                    minTop - MULTI_SELECT_SCREEN_PADDING_PX,
+                    maxRight + MULTI_SELECT_SCREEN_PADDING_PX,
+                    maxBottom + MULTI_SELECT_SCREEN_PADDING_PX
+                );
+                return;
+            }
+        }
+
+        const camera = _module.camera;
+        const container = _module.container;
+
+        // Convert world corners to screen coordinates
+        const topLeft = worldToScreen(currentBounds.minX, currentBounds.maxY, camera, container);
+        const bottomRight = worldToScreen(currentBounds.maxX, currentBounds.minY, camera, container);
+
+        const left = Math.min(topLeft.x, bottomRight.x);
+        const top = Math.min(topLeft.y, bottomRight.y);
+        const width = Math.abs(bottomRight.x - topLeft.x);
+        const height = Math.abs(bottomRight.y - topLeft.y);
+
+        applyOverlayRect(left, top, left + width, top + height);
+    }
+
+    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 hideSingleImageOverlay() {
+        if (singleImageOverlay) {
+            singleImageOverlay.style.display = 'none';
+            singleImageOverlay.style.visibility = 'hidden';
+        }
+    }
+
+    function getActiveSelectedNodeIds() {
+        if (!_module) return [];
+        if (_module.multiSelectedNodeIds?.size > 0) {
+            return Array.from(_module.multiSelectedNodeIds);
+        }
+        return _module.selectedNodeIdJs ? [_module.selectedNodeIdJs] : [];
+    }
+
+    function getSingleSelectedImageNodeId() {
+        const selectedIds = getActiveSelectedNodeIds();
+        if (selectedIds.length !== 1) return null;
+
+        const nodeId = selectedIds[0];
+        const nodeEntry = _module?.nodeObjectsById?.get(nodeId);
+        return nodeEntry?.model?.contentType === 'image' ? nodeId : null;
+    }
+
+    function updateSingleImageOverlay() {
+        if (!_module || !singleImageOverlay || !_module.camera || !_module.container) return;
+
+        const nodeId = getSingleSelectedImageNodeId();
+        if (!nodeId) {
+            hideSingleImageOverlay();
+            return;
+        }
+
+        const nodeEntry = _module.nodeObjectsById.get(nodeId);
+        const obj = nodeEntry?.glObject || nodeEntry?.cssObject;
+        const model = nodeEntry?.model;
+        if (!obj || !model) {
+            hideSingleImageOverlay();
+            return;
+        }
+
+        const screenRect = getNodeScreenRect(nodeEntry);
+        if (screenRect) {
+            const screenWidth = Math.max(0, screenRect.right - screenRect.left);
+            const screenHeight = Math.max(0, screenRect.bottom - screenRect.top);
+            if (screenWidth > 0 && screenHeight > 0) {
+                singleImageOverlay.style.left = `${screenRect.left}px`;
+                singleImageOverlay.style.top = `${screenRect.top}px`;
+                singleImageOverlay.style.width = `${screenWidth}px`;
+                singleImageOverlay.style.height = `${screenHeight}px`;
+                singleImageOverlay.style.display = 'block';
+                singleImageOverlay.style.visibility = 'visible';
+                return;
+            }
+        }
+
+        const x = obj.position.x;
+        const y = obj.position.y;
+        const width = Math.max(1, Number(model.width || obj.userData?.worldWidth || 0) || 1);
+        const height = Math.max(1, Number(model.height || obj.userData?.worldHeight || 0) || 1);
+
+        const topLeft = worldToScreen(x, y, _module.camera, _module.container);
+        const bottomRight = worldToScreen(x + width, y - height, _module.camera, _module.container);
+
+        const left = Math.min(topLeft.x, bottomRight.x);
+        const top = Math.min(topLeft.y, bottomRight.y);
+        const screenWidth = Math.abs(bottomRight.x - topLeft.x);
+        const screenHeight = Math.abs(bottomRight.y - topLeft.y);
+
+        if (![left, top, screenWidth, screenHeight].every(Number.isFinite) || screenWidth <= 0 || screenHeight <= 0) {
+            hideSingleImageOverlay();
+            return;
+        }
+
+        singleImageOverlay.style.left = `${left}px`;
+        singleImageOverlay.style.top = `${top}px`;
+        singleImageOverlay.style.width = `${screenWidth}px`;
+        singleImageOverlay.style.height = `${screenHeight}px`;
+        singleImageOverlay.style.display = 'block';
+        singleImageOverlay.style.visibility = 'visible';
+    }
+
+    function hide() {
+        if (multiSelectOverlay) {
+            multiSelectOverlay.style.display = 'none';
+            multiSelectOverlay.style.visibility = 'hidden';
+        }
+        hideSingleImageOverlay();
+        currentBounds = null;
+        initialNodeSizes.clear();
+    }
+
+    function onResizeStart(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        isResizing = true;
+        setBrowserSelectionLock(true, 'resize');
+        resizeHandle = e.target.dataset.corner;
+        resizeStartBounds = { ...currentBounds };
+        resizeStartMouse = { x: e.clientX, y: e.clientY };
+
+        multiSelectOverlay.style.cursor = `${resizeHandle}-resize`;
+    }
+
+    function onResizeMove(e) {
+        if (!isResizing || !resizeHandle || !_module) return;
+
+        const deltaX = e.clientX - resizeStartMouse.x;
+        const deltaY = e.clientY - resizeStartMouse.y;
+
+        // Convert screen delta to world delta (approximate)
+        const camera = _module.camera;
+        const container = _module.container;
+        const scaleX = (camera.position.z / 1000) * 1.5; // Rough conversion factor
+        const scaleY = scaleX;
+
+        const worldDeltaX = deltaX * scaleX;
+        const worldDeltaY = -deltaY * scaleY; // Screen Y is inverted
+
+        // Update bounds based on which corner is being dragged
+        const newBounds = { ...resizeStartBounds };
+
+        if (resizeHandle.includes('e')) {
+            newBounds.maxX = resizeStartBounds.maxX + worldDeltaX;
+        }
+        if (resizeHandle.includes('w')) {
+            newBounds.minX = resizeStartBounds.minX + worldDeltaX;
+        }
+        if (resizeHandle.includes('s')) {
+            newBounds.minY = resizeStartBounds.minY + worldDeltaY;
+        }
+        if (resizeHandle.includes('n')) {
+            newBounds.maxY = resizeStartBounds.maxY + worldDeltaY;
+        }
+
+        // Ensure minimum size
+        const minSize = 100;
+        if (newBounds.maxX - newBounds.minX < minSize || newBounds.maxY - newBounds.minY < minSize) {
+            return;
+        }
+
+        currentBounds = newBounds;
+        updateOverlayPosition(null, true);
+
+        // Scale and reposition selected nodes proportionally
+        scaleSelectedNodes();
+    }
+
+    function onResizeEnd(e) {
+        if (!isResizing) return;
+
+        isResizing = false;
+        setBrowserSelectionLock(false, 'resize');
+        resizeHandle = null;
+        resizeStartBounds = null;
+        resizeStartMouse = null;
+        multiSelectOverlay.style.cursor = '';
+
+        // Re-apply masonry layout to fit the new bounds
+        const selectedIds = getSelectedImageNodeIds();
+        if (selectedIds.length > 0) {
+            applyTidyLayout('masonry', selectedIds);
+        }
+    }
+
+    function scaleSelectedNodes() {
+        if (!_module || !resizeStartBounds || !currentBounds || !resizeHandle) return;
+
+        const oldWidth = resizeStartBounds.maxX - resizeStartBounds.minX;
+        const oldHeight = resizeStartBounds.maxY - resizeStartBounds.minY;
+        const newWidth = currentBounds.maxX - currentBounds.minX;
+        const newHeight = currentBounds.maxY - currentBounds.minY;
+
+        const scaleX = newWidth / oldWidth;
+        const scaleY = newHeight / oldHeight;
+
+        // ▼▼▼ [Fix] Determine anchor point based on which handle is being dragged ▼▼▼
+        // The anchor is the OPPOSITE corner of the handle being dragged
+        let anchorX, anchorY, oldAnchorX, oldAnchorY;
+
+        if (resizeHandle.includes('e')) {
+            // Dragging east side: anchor is west (minX)
+            anchorX = currentBounds.minX;
+            oldAnchorX = resizeStartBounds.minX;
+        } else {
+            // Dragging west side: anchor is east (maxX)
+            anchorX = currentBounds.maxX;
+            oldAnchorX = resizeStartBounds.maxX;
+        }
+
+        if (resizeHandle.includes('s')) {
+            // Dragging south side: anchor is north (maxY)
+            anchorY = currentBounds.maxY;
+            oldAnchorY = resizeStartBounds.maxY;
+        } else {
+            // Dragging north side: anchor is south (minY)
+            anchorY = currentBounds.minY;
+            oldAnchorY = resizeStartBounds.minY;
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        initialNodeSizes.forEach((initialData, nodeId) => {
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (!nodeEntry) return;
+
+            const obj = nodeEntry.glObject || nodeEntry.cssObject;
+            if (!obj) return;
+
+            // ▼▼▼ [Fix] Calculate relative position from anchor point ▼▼▼
+            const relX = (initialData.x - oldAnchorX) / oldWidth;
+            const relY = (initialData.y - oldAnchorY) / oldHeight;
+
+            // New position relative to new anchor
+            const newX = anchorX + relX * newWidth;
+            const newY = anchorY + relY * newHeight;
+            // ▲▲▲ [Fix] ▲▲▲
+
+            // ▼▼▼ [Fix] Use independent X/Y scaling for free movement ▼▼▼
+            const newNodeWidth = Math.max(50, Math.round(initialData.width * scaleX));
+            const newNodeHeight = Math.max(50, Math.round(initialData.height * scaleY));
+            // ▲▲▲ [Fix] ▲▲▲
+
+            // Update position
+            obj.position.x = newX;
+            obj.position.y = newY;
+
+            // Update model
+            nodeEntry.model.x = newX;
+            nodeEntry.model.y = newY;
+            nodeEntry.model.width = newNodeWidth;
+            nodeEntry.model.height = newNodeHeight;
+
+            // Trigger texture/geometry update
+            if (window.MindMapNodes && window.MindMapNodes.updateNodeContent) {
+                // Queue texture regeneration (we'll do this after resize ends to avoid lag)
+            }
+        });
+    }
+
+    async function handleMenuAction(action) {
+        if (!_module) return;
+
+        const selectedIds = getSelectedNodeIds();
+        if (selectedIds.length === 0) return;
+
+        switch (action) {
+            case 'copy':
+                copySelectedNodes(selectedIds);
+                break;
+            case 'masonry':
+                await applyTidyLayout('masonry');
+                break;
+            case 'grid':
+                await applyTidyLayout('grid');
+                break;
+            case 'stripHorizontal':
+                await applyTidyLayout('stripHorizontal');
+                break;
+            case 'stack':
+                await mergeSelectedImagesIntoStack();
+                break;
+            case 'expand':
+                await fitTextNodesToContentAndReflowY(selectedIds);
+                break;
+            case 'delete':
+                deleteSelectedNodes(selectedIds);
+                break;
+        }
+    }
+
+    // ▼▼▼ [New] Supported node types for multi-select ▼▼▼
+    const SUPPORTED_TYPES = ['image', 'text', 'markdown', 'note', 'code'];
+    const TEXT_TYPES = ['text', 'markdown', 'note', 'code'];
+    const TEXT_FIT_MAX_HEIGHT = 12000;
+    // ▲▲▲ [New] ▲▲▲
+
+    function getSelectedNodeIds() {
+        if (!_module) return [];
+
+        const nodeIds = [];
+        _module.multiSelectedNodeIds.forEach(nodeId => {
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (nodeEntry && nodeEntry.model && SUPPORTED_TYPES.includes(nodeEntry.model.contentType)) {
+                nodeIds.push(nodeId);
+            }
+        });
+        return nodeIds;
+    }
+
+    function getSelectedImageNodeIds() {
+        if (!_module) return [];
+
+        const imageNodeIds = [];
+        _module.multiSelectedNodeIds.forEach(nodeId => {
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (nodeEntry && nodeEntry.model && nodeEntry.model.contentType === 'image') {
+                imageNodeIds.push(nodeId);
+            }
+        });
+        return imageNodeIds;
+    }
+
+    function getSelectedTextNodeIds() {
+        if (!_module) return [];
+
+        const textNodeIds = [];
+        _module.multiSelectedNodeIds.forEach(nodeId => {
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (nodeEntry && nodeEntry.model && TEXT_TYPES.includes(nodeEntry.model.contentType)) {
+                textNodeIds.push(nodeId);
+            }
+        });
+        return textNodeIds;
+    }
+
+    function quantile(values, q) {
+        if (!Array.isArray(values) || values.length === 0) return 0;
+
+        const sorted = [...values].sort((a, b) => a - b);
+        const index = (sorted.length - 1) * q;
+        const i0 = Math.floor(index);
+        const i1 = Math.min(sorted.length - 1, i0 + 1);
+        const t = index - i0;
+        return sorted[i0] * (1 - t) + sorted[i1] * t;
+    }
+
+    function getImageNodeRects(nodeIds) {
+        return nodeIds.map(nodeId => {
+            const entry = _module.nodeObjectsById.get(nodeId);
+            if (!entry) return null;
+
+            const model = entry.model || {};
+            return {
+                nodeId,
+                width: Math.max(1, Number(model.width || 0) || 1),
+                height: Math.max(1, Number(model.height || 0) || 1)
+            };
+        }).filter(Boolean);
+    }
+
+    function buildTidyOptions(mode, nodeIds) {
+        const rects = getImageNodeRects(nodeIds);
+        const widths = rects.map(r => r.width);
+        const heights = rects.map(r => r.height);
+
+        const q75w = Math.max(120, Math.round(quantile(widths, 0.75) || 280));
+        const q75h = Math.max(120, Math.round(quantile(heights, 0.75) || 220));
+
+        const selectionWidth = currentBounds
+            ? Math.max(120, (currentBounds.maxX - currentBounds.minX) - 40)
+            : Math.max(120, widths.reduce((sum, w) => sum + w, 0));
+
+        const options = {
+            mode,
+            gapX: 24,
+            gapY: 24,
+            quantile: 0.75,
+            order: 'spatialReading',
+            anchor: 'selectionBoundsTopLeft',
+            maxColumns: 12,
+            sizeMode: 'preserve'
+        };
+
+        switch (mode) {
+            case 'masonry':
+                options.sizeMode = 'uniformWidth';
+                options.targetWidth = q75w;
+                break;
+            case 'grid':
+                options.sizeMode = 'fitCellDownOnly';
+                options.cellWidth = q75w;
+                options.cellHeight = q75h;
+                break;
+            case 'stripHorizontal':
+                options.sizeMode = 'uniformHeight';
+                options.targetHeight = q75h;
+                break;
+            case 'stripVertical':
+                options.sizeMode = 'uniformWidth';
+                options.targetWidth = q75w;
+                break;
+            default:
+                options.sizeMode = 'preserve';
+                break;
+        }
+
+        if (mode === 'grid' || mode === 'masonry') {
+            options.columns = 2;
+        }
+
+        return options;
+    }
+
+    function applyLayoutUpdatesToScene(updates) {
+        if (!_module || !Array.isArray(updates) || updates.length === 0) return;
+
+        const resized = [];
+
+        updates.forEach(update => {
+            const nodeId = update.nodeId ?? update.NodeId;
+            if (!nodeId) return;
+
+            const entry = _module.nodeObjectsById.get(nodeId);
+            if (!entry || !entry.model) return;
+
+            const x = Number(update.x ?? update.X ?? entry.model.positionX ?? entry.model.x ?? 0);
+            const y = Number(update.y ?? update.Y ?? entry.model.positionY ?? entry.model.y ?? 0);
+            const width = Math.max(1, Math.round(Number(update.width ?? update.Width ?? entry.model.width ?? 1)));
+            const height = Math.max(1, Math.round(Number(update.height ?? update.Height ?? entry.model.height ?? 1)));
+
+            const oldWidth = Math.round(Number(entry.model.width || 0));
+            const oldHeight = Math.round(Number(entry.model.height || 0));
+
+            entry.model.positionX = x;
+            entry.model.positionY = y;
+            entry.model.x = x;
+            entry.model.y = y;
+            entry.model.width = width;
+            entry.model.height = height;
+
+            if (entry.glObject) {
+                entry.glObject.position.x = x;
+                entry.glObject.position.y = y;
+            }
+            if (entry.cssObject) {
+                entry.cssObject.position.x = x;
+                entry.cssObject.position.y = y;
+            }
+
+            if (window.MindMapNodes?.updateNodeSpatialGrid) {
+                window.MindMapNodes.updateNodeSpatialGrid(_module, nodeId);
+            }
+
+            if (oldWidth !== width || oldHeight !== height) {
+                resized.push({ nodeId, width, height });
+            }
+        });
+
+        resized.forEach(item => {
+            MindMapNodes.updateNodeContent(_module, item.nodeId, null, item.width, item.height)
+                .catch(err => console.warn('[MultiSelect] Failed to refresh node after tidy:', item.nodeId, err));
+        });
+
+        if (_module.markLODPositionsDirty) {
+            _module.markLODPositionsDirty(selectedIds);
+        }
+        if (resized.length > 0 && _module.markLODDirty) {
+            _module.markLODDirty('update-node', resized.map(item => item.nodeId));
+        }
+        if (_module.updateVisibility && _module.camera) {
+            _module.updateVisibility(_module.camera);
+        }
+    }
+
+    async function applyTidyLayout(mode, explicitNodeIds = null) {
+        if (!_module) return;
+
+        const selectedIds = (explicitNodeIds && explicitNodeIds.length > 0)
+            ? explicitNodeIds
+            : getSelectedImageNodeIds();
+
+        if (selectedIds.length === 0) return;
+
+        if (!_module.dotNetHelper) {
+            if (mode === 'masonry') {
+                applyMasonryLayout(selectedIds);
+            }
+            return;
+        }
+
+        const request = {
+            nodeIds: selectedIds,
+            options: buildTidyOptions(mode, selectedIds)
+        };
+
+        try {
+            const updates = await _module.dotNetHelper.invokeMethodAsync('ApplyTidyLayoutFromJs', request);
+            applyLayoutUpdatesToScene(updates);
+            showMultiSelectBounds(getSelectedNodeIds());
+        } catch (error) {
+            console.warn(`[MultiSelect] Tidy layout failed (${mode}), using fallback:`, error);
+            if (mode === 'masonry') {
+                applyMasonryLayout(selectedIds);
+            }
+        }
+    }
+
+    async function mergeSelectedImagesIntoStack() {
+        if (!_module || !_module.dotNetHelper) return;
+
+        const selectedIds = getSelectedImageNodeIds();
+        if (selectedIds.length < 2) return;
+
+        try {
+            const result = await _module.dotNetHelper.invokeMethodAsync('MergeImageStacksFromJs', {
+                nodeIds: selectedIds
+            });
+
+            if (!result) return;
+
+            const removedIds = result.removedNodeIds || result.RemovedNodeIds || [];
+            removedIds.forEach(nodeId => {
+                if (!nodeId) return;
+                if (_module.multiSelectedNodeIds?.delete) {
+                    _module.multiSelectedNodeIds.delete(nodeId);
+                }
+            });
+            if (window.MindMapNodes?.removeNodes) {
+                window.MindMapNodes.removeNodes(_module, removedIds);
+            } else {
+                removedIds.forEach(nodeId => window.MindMapNodes?.removeNode?.(_module, nodeId));
+            }
+
+            const primaryNodeId = result.primaryNodeId || result.PrimaryNodeId || null;
+            if (primaryNodeId) {
+                _module.multiSelectedNodeIds?.clear?.();
+                _module.multiSelectedNodeIds?.add?.(primaryNodeId);
+                _module.selectedNodeIdJs = primaryNodeId;
+                window.MindMapNodes?.clearMultiSelection?.(_module, primaryNodeId);
+                window.MindMapNodes?.updateNodeSelectionStyle?.(_module, primaryNodeId, true, true);
+            }
+
+            const remainingSelection = getSelectedNodeIds();
+            if (remainingSelection.length >= 2) {
+                showMultiSelectBounds(remainingSelection);
+            } else {
+                hide();
+            }
+        } catch (error) {
+            console.warn('[MultiSelect] Failed to merge image stacks:', error);
+        }
+    }
+
+    function copySelectedNodes(selectedIds) {
+        // Copy nodes to clipboard (as internal format)
+        const copiedNodes = [];
+        selectedIds.forEach(nodeId => {
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (nodeEntry?.model) {
+                const model = nodeEntry.model;
+                copiedNodes.push({
+                    contentType: model.contentType,
+                    prompt: model.prompt,
+                    response: model.response,
+                    width: model.width,
+                    height: model.height,
+                    positionX: model.positionX,
+                    positionY: model.positionY,
+                    positionZ: model.positionZ,
+                    isAiEnabled: model.isAiEnabled !== false,
+                    isWordWrap: !!model.isWordWrap,
+                    isChunkedText: model.isChunkedText,
+                    totalLineCount: model.totalLineCount,
+                    sourceFilePath: model.sourceFilePath,
+                    scrollOffset: model.scrollOffset,
+                    maxScroll: model.maxScroll,
+                    isExpanded: !!model.isExpanded,
+                    originalHeight: model.originalHeight,
+                    metadata: model.metadata
+                });
+            }
+        });
+
+        _module.copiedNodes = copiedNodes;
+        _module.copiedNodesTimestamp = Date.now();
+
+        // ▼▼▼ [Cross-Tab] Write full node data as JSON to system clipboard ▼▼▼
+        try {
+            const clipboardPayload = JSON.stringify({
+                __type: '__MINDMAP_NODES__',
+                nodes: copiedNodes
+            });
+            navigator.clipboard.writeText(clipboardPayload);
+        } catch { }
+        // ▲▲▲ [Cross-Tab] ▲▲▲
+
+        console.log(`[MultiSelect] Copied ${copiedNodes.length} nodes`);
+    }
+
+    function readCssPixelValue(value) {
+        const parsed = Number.parseFloat(String(value || '0'));
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+
+    function getVerticalBoxExtras(element) {
+        if (!element || typeof window === 'undefined' || !window.getComputedStyle) return 0;
+
+        const computed = window.getComputedStyle(element);
+        return readCssPixelValue(computed.paddingTop)
+            + readCssPixelValue(computed.paddingBottom)
+            + readCssPixelValue(computed.borderTopWidth)
+            + readCssPixelValue(computed.borderBottomWidth);
+    }
+
+    function getVerticalMargins(element) {
+        if (!element || typeof window === 'undefined' || !window.getComputedStyle) return 0;
+
+        const computed = window.getComputedStyle(element);
+        return readCssPixelValue(computed.marginTop) + readCssPixelValue(computed.marginBottom);
+    }
+
+    function forceNaturalBlockHeight(element, preserveScrollMetrics = false) {
+        if (!element?.style) return;
+
+        element.style.setProperty('height', 'auto', 'important');
+        element.style.setProperty('min-height', '0', 'important');
+        element.style.setProperty('max-height', 'none', 'important');
+        element.style.setProperty('flex', '0 0 auto', 'important');
+
+        if (preserveScrollMetrics) {
+            // Keep scrollbar-gutter and right padding active so wrapping matches the real CSS3D node.
+            element.style.setProperty('overflow-x', 'hidden', 'important');
+            element.style.setProperty('overflow-y', 'auto', 'important');
+        } else {
+            element.style.setProperty('overflow', 'visible', 'important');
+            element.style.setProperty('overflow-y', 'visible', 'important');
+        }
+    }
+
+    function measureOuterHeight(element, preferScrollHeight = false) {
+        if (!element) return 0;
+
+        let height = 0;
+        const push = (value) => {
+            const numeric = Number(value);
+            if (Number.isFinite(numeric) && numeric > height) {
+                height = numeric;
+            }
+        };
+
+        if (typeof element.getBoundingClientRect === 'function') {
+            push(element.getBoundingClientRect().height);
+        }
+        push(element.offsetHeight);
+        push(element.clientHeight);
+        if (preferScrollHeight) {
+            push(element.scrollHeight);
+        }
+
+        return Math.ceil(height + getVerticalMargins(element));
+    }
+
+    function measureExpandedHeightFromCssDom(nodeEntry, extraBuffer = 0) {
+        const wrapper = nodeEntry?.cssObject?.element;
+        const source = wrapper?.firstElementChild;
+        if (!source || typeof document === 'undefined') return null;
+
+        let probe = null;
+        try {
+            const modelWidth = Math.max(1, Number(nodeEntry.model?.width || 400));
+            probe = source.cloneNode(true);
+
+            if (probe.removeAttribute) probe.removeAttribute('id');
+            const idElements = probe.querySelectorAll?.('[id]');
+            if (idElements?.length) {
+                idElements.forEach(el => el.removeAttribute('id'));
+            }
+
+            Object.assign(probe.style, {
+                position: 'absolute',
+                left: '-100000px',
+                top: '0',
+                width: `${modelWidth}px`,
+                height: 'auto',
+                minHeight: '0',
+                maxHeight: 'none',
+                overflow: 'visible',
+                display: 'block',
+                visibility: 'hidden',
+                pointerEvents: 'none',
+                transform: 'none',
+                boxSizing: 'border-box'
+            });
+
+            const contentWrapper = probe.querySelector('.node-content-wrapper');
+            if (contentWrapper) {
+                forceNaturalBlockHeight(contentWrapper);
+                contentWrapper.style.display = 'block';
+            }
+
+            const contentSelectors = [
+                '[id^="node-response-"]',
+                '.node-response',
+                '.note-content',
+                '.markdown-body',
+                '.code-body',
+                '.code-body-content',
+                '.note-textarea',
+                'textarea'
+            ].join(', ');
+            const contentElements = Array.from(probe.querySelectorAll(contentSelectors));
+            contentElements.forEach(element => {
+                if (element.style) {
+                    element.style.display = element.tagName === 'TEXTAREA' ? 'block' : (element.style.display || 'block');
+                }
+                forceNaturalBlockHeight(element, true);
+            });
+
+            document.body.appendChild(probe);
+
+            const measuredWhole = Math.max(
+                measureOuterHeight(probe, true),
+                Math.ceil(probe.scrollHeight || 0)
+            );
+
+            let measuredByChildren = 0;
+            if (contentWrapper) {
+                measuredByChildren += getVerticalBoxExtras(probe);
+                measuredByChildren += getVerticalBoxExtras(contentWrapper);
+
+                Array.from(contentWrapper.children || []).forEach(child => {
+                    if (child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') {
+                        return;
+                    }
+
+                    const isContent = child.matches?.(contentSelectors);
+                    measuredByChildren += measureOuterHeight(child, !!isContent);
+                });
+            }
+
+            const measured = Math.ceil(Math.max(measuredWhole, measuredByChildren));
+            if (!Number.isFinite(measured) || measured <= 0) return null;
+
+            return measured + Math.max(0, extraBuffer);
+        } catch {
+            return null;
+        } finally {
+            if (probe && probe.parentNode) {
+                probe.parentNode.removeChild(probe);
+            }
+        }
+    }
+
+    function getTextFitMinHeight(model) {
+        const contentType = String(model?.contentType || '').toLowerCase();
+        if (contentType === 'note') return 96;
+        if (contentType === 'code') return 120;
+        return 88;
+    }
+
+    async function measureTextFitHeight(nodeEntry) {
+        const model = nodeEntry?.model;
+        if (!model) return null;
+
+        const FIT_BUFFER = 18;
+        const minHeight = getTextFitMinHeight(model);
+
+        const domHeight = measureExpandedHeightFromCssDom(nodeEntry, FIT_BUFFER);
+        let factoryHeight = null;
+
+        if (window.MindMapTextureFactory?.measureHtmlHeightAsync) {
+            const zoomLevel = 2;
+            const measureModel = {
+                ...model,
+                response: model.response ?? model.Response ?? model.content ?? ''
+            };
+            const { height: measuredHeight } = await window.MindMapTextureFactory.measureHtmlHeightAsync(
+                measureModel,
+                zoomLevel,
+                (model.width || 400) * zoomLevel,
+                null,
+                TEXT_FIT_MAX_HEIGHT
+            );
+            factoryHeight = measuredHeight + FIT_BUFFER;
+        }
+
+        const requiredHeight = Math.max(
+            Number.isFinite(domHeight) ? domHeight : 0,
+            Number.isFinite(factoryHeight) ? factoryHeight : 0
+        );
+
+        if (!Number.isFinite(requiredHeight) || requiredHeight <= 0) {
+            return null;
+        }
+
+        return Math.min(TEXT_FIT_MAX_HEIGHT, Math.max(minHeight, Math.ceil(requiredHeight)));
+    }
+
+    function readRenderedTextOverflowAdjustment(item) {
+        const entry = item?.entry;
+        const root = entry?.cssObject?.element?.firstElementChild || entry?.cssObject?.element;
+        if (!root) return 0;
+
+        const contentEl = root.querySelector?.('[id^="node-response-"]')
+            || root.querySelector?.('.node-response')
+            || root.querySelector?.('.note-textarea')
+            || root.querySelector?.('textarea');
+        if (!contentEl) return 0;
+
+        const scrollHeight = Math.ceil(Number(contentEl.scrollHeight || 0));
+        const clientHeight = Math.ceil(Number(contentEl.clientHeight || 0));
+        const overflow = scrollHeight - clientHeight;
+        if (!Number.isFinite(overflow) || overflow <= 1) return 0;
+
+        return overflow + 12;
+    }
+
+    function refineTextFitItemsFromRenderedDom(items) {
+        if (!Array.isArray(items) || items.length === 0) return 0;
+
+        let adjusted = 0;
+        for (const item of items) {
+            const correction = readRenderedTextOverflowAdjustment(item);
+            if (correction <= 0) continue;
+
+            item.newHeight = Math.min(TEXT_FIT_MAX_HEIGHT, Math.ceil(item.newHeight + correction));
+            adjusted++;
+        }
+
+        return adjusted;
+    }
+
+    function getNodeFrame(nodeId) {
+        const entry = _module?.nodeObjectsById?.get?.(nodeId);
+        const model = entry?.model;
+        if (!entry || !model) return null;
+
+        const x = Number(model.positionX ?? model.x ?? entry.glObject?.position?.x ?? entry.cssObject?.position?.x ?? 0);
+        const y = Number(model.positionY ?? model.y ?? entry.glObject?.position?.y ?? entry.cssObject?.position?.y ?? 0);
+        const width = Math.max(1, Math.round(Number(model.width || 400)));
+        const height = Math.max(1, Math.round(Number(model.height || 200)));
+
+        return {
+            nodeId,
+            entry,
+            model,
+            x,
+            y,
+            width,
+            height,
+            left: x,
+            right: x + width,
+            centerX: x + width / 2
+        };
+    }
+
+    function horizontalOverlapRatio(a, b) {
+        const overlap = Math.min(a.right, b.right) - Math.max(a.left, b.left);
+        if (overlap <= 0) return 0;
+        return overlap / Math.max(1, Math.min(a.width, b.width));
+    }
+
+    function groupTextFramesByColumn(items) {
+        const groups = [];
+        const ordered = [...items].sort((a, b) => a.left - b.left || b.y - a.y);
+
+        for (const item of ordered) {
+            let target = null;
+            let bestScore = 0;
+
+            for (const group of groups) {
+                const groupFrame = {
+                    left: group.left,
+                    right: group.right,
+                    width: Math.max(1, group.right - group.left)
+                };
+                const overlapScore = horizontalOverlapRatio(item, groupFrame);
+                const centerDistance = Math.abs(item.centerX - group.centerX);
+                const centerThreshold = Math.max(80, Math.min(item.width, groupFrame.width) * 0.35);
+                const score = overlapScore > 0 ? overlapScore : (centerDistance <= centerThreshold ? 0.2 : 0);
+
+                if (score > bestScore) {
+                    bestScore = score;
+                    target = group;
+                }
+            }
+
+            if (!target || bestScore < 0.15) {
+                target = {
+                    items: [],
+                    left: item.left,
+                    right: item.right,
+                    centerX: item.centerX
+                };
+                groups.push(target);
+            }
+
+            target.items.push(item);
+            target.left = Math.min(target.left, item.left);
+            target.right = Math.max(target.right, item.right);
+            target.centerX = target.items.reduce((sum, n) => sum + n.centerX, 0) / target.items.length;
+        }
+
+        return groups;
+    }
+
+    function buildTextFitLayoutUpdates(items) {
+        const DEFAULT_GAP = 24;
+        const MIN_GAP = 12;
+        const groups = groupTextFramesByColumn(items);
+        const updates = [];
+
+        for (const group of groups) {
+            const ordered = [...group.items].sort((a, b) => b.y - a.y || a.x - b.x);
+
+            let previous = null;
+            for (const item of ordered) {
+                let y = item.y;
+
+                if (previous) {
+                    const originalGap = previous.y - previous.height - item.y;
+                    const gap = Number.isFinite(originalGap) && originalGap >= 0
+                        ? Math.max(MIN_GAP, originalGap)
+                        : DEFAULT_GAP;
+                    y = previous.newY - previous.newHeight - gap;
+                }
+
+                item.newY = y;
+                previous = item;
+
+                updates.push({
+                    nodeId: item.nodeId,
+                    x: item.x,
+                    y,
+                    width: item.width,
+                    height: item.newHeight
+                });
+            }
+        }
+
+        return updates;
+    }
+
+    async function applyTextFitLayoutUpdates(updates) {
+        if (!_module || !Array.isArray(updates) || updates.length === 0) return;
+
+        const renderPromises = [];
+
+        for (const update of updates) {
+            const entry = _module.nodeObjectsById.get(update.nodeId);
+            if (!entry || !entry.model) continue;
+
+            const width = Math.max(1, Math.round(Number(update.width || entry.model.width || 400)));
+            const height = Math.max(1, Math.round(Number(update.height || entry.model.height || 200)));
+            const x = Number(update.x ?? entry.model.positionX ?? entry.model.x ?? 0);
+            const y = Number(update.y ?? entry.model.positionY ?? entry.model.y ?? 0);
+
+            entry.model.positionX = x;
+            entry.model.positionY = y;
+            entry.model.x = x;
+            entry.model.y = y;
+            entry.model.width = width;
+            entry.model.height = height;
+            entry.model.originalHeight = height;
+            entry.model.isExpanded = false;
+            entry.model.scrollOffset = 0;
+            entry.model.maxScroll = 0;
+
+            if (entry.glObject) {
+                entry.glObject.position.x = x;
+                entry.glObject.position.y = y;
+                if (entry.glObject.userData) {
+                    entry.glObject.userData.worldWidth = width;
+                    entry.glObject.userData.worldHeight = height;
+                }
+            }
+            if (entry.cssObject) {
+                entry.cssObject.position.x = x;
+                entry.cssObject.position.y = y;
+                if (entry.cssObject.userData) {
+                    entry.cssObject.userData.worldWidth = width;
+                    entry.cssObject.userData.worldHeight = height;
+                }
+                window.MindMapCss3DManager?.syncCss3dContent?.(entry.model, entry.cssObject);
+                entry.cssObject.updateMatrixWorld?.(true);
+            }
+
+            window.MindMapNodes?.updateNodeSpatialGrid?.(_module, update.nodeId);
+            window.MindMapTextLOD?.invalidateNodeCache?.(update.nodeId, false);
+            window.MindMapTextOverlayV2?.invalidateNode?.(_module, update.nodeId, 'layout');
+
+            if (window.MindMapNodes?.pendingNodeUpdates && window.MindMapPipeline?.processRenderQueue) {
+                window.MindMapNodes.pendingNodeUpdates.set(update.nodeId, {
+                    content: entry.model.response ?? entry.model.Response ?? entry.model.content ?? '',
+                    width,
+                    height,
+                    skipMeasure: true,
+                    skipPersistDimensions: true
+                });
+                renderPromises.push(window.MindMapPipeline.processRenderQueue(_module, update.nodeId));
+            }
+        }
+
+        const RENDER_CHUNK_SIZE = 10;
+        for (let i = 0; i < renderPromises.length; i += RENDER_CHUNK_SIZE) {
+            await Promise.all(renderPromises.slice(i, i + RENDER_CHUNK_SIZE));
+            if (i + RENDER_CHUNK_SIZE < renderPromises.length) {
+                await new Promise(resolve => setTimeout(resolve, 0));
+            }
+        }
+
+        for (const update of updates) {
+            window.MindMapTextOverlayV2?.updateNodePlacement?.(_module, update.nodeId);
+        }
+
+        _module.markLODPositionsDirty?.();
+        _module.markLODDirty?.();
+        _module.updateVisibility?.(_module.camera);
+    }
+
+    // Fit selected text nodes to their CSS3D content and reflow Y inside each column.
+    async function fitTextNodesToContentAndReflowY(selectedIds) {
+        if (!_module) return;
+
+        const textNodeIds = selectedIds.filter(nodeId => {
+            const entry = _module.nodeObjectsById.get(nodeId);
+            return entry && TEXT_TYPES.includes(entry.model?.contentType);
+        });
+
+        if (textNodeIds.length === 0) {
+            console.log('[MultiSelect] No text nodes to fit');
+            return;
+        }
+
+        console.log(`[MultiSelect] Fitting ${textNodeIds.length} text nodes to content...`);
+        const startTime = performance.now();
+
+        const measureStart = performance.now();
+        const measurePromises = textNodeIds.map(async (nodeId) => {
+            const frame = getNodeFrame(nodeId);
+            if (!frame) return null;
+
+            try {
+                const newHeight = await measureTextFitHeight(frame.entry);
+                if (!Number.isFinite(newHeight) || newHeight <= 0) return null;
+                return { ...frame, newHeight };
+            } catch (err) {
+                console.error(`[MultiSelect] Failed to measure node ${nodeId}:`, err);
+                return null;
+            }
+        });
+
+        const measureResults = await Promise.all(measurePromises);
+        const fitItems = measureResults.filter(r => r !== null);
+
+        const measureTime = (performance.now() - measureStart).toFixed(0);
+        console.log(`[MultiSelect] Measured ${textNodeIds.length} nodes in ${measureTime}ms`);
+
+        if (fitItems.length > 0) {
+            let layoutUpdates = buildTextFitLayoutUpdates(fitItems);
+            await applyTextFitLayoutUpdates(layoutUpdates);
+
+            const refinedCount = refineTextFitItemsFromRenderedDom(fitItems);
+            if (refinedCount > 0) {
+                layoutUpdates = buildTextFitLayoutUpdates(fitItems);
+                await applyTextFitLayoutUpdates(layoutUpdates);
+                console.log(`[MultiSelect] Refined ${refinedCount} text node heights from rendered DOM`);
+            }
+
+            if (_module.dotNetHelper && layoutUpdates.length > 0) {
+                await _module.dotNetHelper.invokeMethodAsync('UpdateMultipleNodesPositionFromJs', layoutUpdates);
+                _module.dotNetHelper.invokeMethodAsync('TriggerBoardSave');
+            }
+
+            const elapsed = (performance.now() - startTime).toFixed(0);
+            console.log(`[MultiSelect] ✅ Fit ${layoutUpdates.length} text nodes in ${elapsed}ms`);
+        }
+
+        // Update bounds after fitting/reflow.
+        showMultiSelectBounds(getSelectedNodeIds());
+    }
+
+    function applyMasonryLayout(selectedIds) {
+        if (!currentBounds || selectedIds.length === 0) return;
+
+        const areaWidth = currentBounds.maxX - currentBounds.minX - 40; // Subtract padding
+        const areaHeight = currentBounds.maxY - currentBounds.minY - 40;
+        const startX = currentBounds.minX + 20;
+        const startY = currentBounds.maxY - 20; // Top of area (remember Y is inverted)
+
+        // Get all nodes with their dimensions
+        const nodes = selectedIds.map(nodeId => {
+            const entry = _module.nodeObjectsById.get(nodeId);
+            return {
+                nodeId,
+                entry,
+                width: entry?.model?.width || 200,
+                height: entry?.model?.height || 200
+            };
+        });
+
+        // Simple masonry: pack into columns
+        const gap = 10;
+        const numColumns = Math.max(1, Math.floor(areaWidth / 500)); // ~500px per column for larger nodes
+        const columnWidth = (areaWidth - gap * (numColumns - 1)) / numColumns;
+        const columnHeights = new Array(numColumns).fill(0);
+
+        // ▼▼▼ [Fix] Add minimum size limits to prevent images from becoming too small ▼▼▼
+        const MIN_IMAGE_WIDTH = 150;
+        const MIN_IMAGE_HEIGHT = 150;
+        const MIN_SCALE_FACTOR = 0.5; // Don't shrink below 50% of original size
+
+        // Calculate scale factor with limits
+        const maxNodeWidth = Math.max(...nodes.map(n => n.width));
+        const rawScaleFactor = columnWidth / maxNodeWidth;
+        const scaleFactor = Math.max(MIN_SCALE_FACTOR, rawScaleFactor);
+        // ▲▲▲ [Fix] ▲▲▲
+
+        nodes.forEach(node => {
+            // Find shortest column
+            const shortestCol = columnHeights.indexOf(Math.min(...columnHeights));
+
+            // Scale with minimum size enforcement
+            let scaledWidth = Math.round(node.width * scaleFactor);
+            let scaledHeight = Math.round(node.height * scaleFactor);
+
+            // ▼▼▼ [Fix] Enforce minimum dimensions ▼▼▼
+            if (scaledWidth < MIN_IMAGE_WIDTH) {
+                const adjustScale = MIN_IMAGE_WIDTH / node.width;
+                scaledWidth = MIN_IMAGE_WIDTH;
+                scaledHeight = Math.round(node.height * adjustScale);
+            }
+            if (scaledHeight < MIN_IMAGE_HEIGHT) {
+                const adjustScale = MIN_IMAGE_HEIGHT / node.height;
+                scaledHeight = MIN_IMAGE_HEIGHT;
+                scaledWidth = Math.round(node.width * adjustScale);
+            }
+            // ▲▲▲ [Fix] ▲▲▲
+
+            const x = startX + shortestCol * (columnWidth + gap);
+            const y = startY - columnHeights[shortestCol];
+
+            // Update node position and size
+            if (node.entry) {
+                const obj = node.entry.glObject || node.entry.cssObject;
+                if (obj) {
+                    obj.position.x = x;
+                    obj.position.y = y;
+                    node.entry.model.positionX = x;
+                    node.entry.model.positionY = y;
+                    node.entry.model.x = x;
+                    node.entry.model.y = y;
+                    node.entry.model.width = scaledWidth;
+                    node.entry.model.height = scaledHeight;
+                }
+            }
+
+            columnHeights[shortestCol] += scaledHeight + gap;
+        });
+
+        // Notify C# and update textures
+        notifyMasonryChanges(selectedIds);
+
+        // Update bounds display
+        showMultiSelectBounds(selectedIds);
+
+        console.log(`[MultiSelect] Applied masonry layout to ${selectedIds.length} nodes`);
+    }
+
+    function notifyMasonryChanges(selectedIds) {
+        const updates = selectedIds.map(nodeId => {
+            const entry = _module.nodeObjectsById.get(nodeId);
+            return {
+                nodeId,
+                x: entry?.model?.positionX ?? entry?.model?.x ?? 0,
+                y: entry?.model?.positionY ?? entry?.model?.y ?? 0,
+                width: entry?.model?.width || 200,
+                height: entry?.model?.height || 200
+            };
+        });
+
+        if (_module.dotNetHelper && updates.length > 0) {
+            _module.dotNetHelper.invokeMethodAsync('UpdateMultipleNodesPositionFromJs', updates);
+
+            // Trigger board save after masonry layout
+            _module.dotNetHelper.invokeMethodAsync('TriggerBoardSave');
+        }
+
+        // Update textures for resized nodes
+        updates.forEach(u => {
+            MindMapNodes.updateNodeContent(_module, u.nodeId, null, u.width, u.height);
+        });
+    }
+
+    function deleteSelectedNodes(selectedIds) {
+        if (!_module || !_module.dotNetHelper) return;
+
+        // Clear selection state FIRST to prevent UI from reappearing
+        _module.multiSelectedNodeIds.clear();
+        _module.selectedNodeIdJs = null;
+
+        // Hide overlay immediately
+        hide();
+
+        // Also force hide in case update() is called
+        if (multiSelectOverlay) {
+            multiSelectOverlay.style.display = 'none';
+            multiSelectOverlay.style.visibility = 'hidden';
+        }
+
+        // Delete via C# (batch delete - much faster than individual calls)
+        const snapshots = selectedIds
+            .map(nodeId => window.MindMapNodes?.captureDeleteSnapshot?.(_module, nodeId))
+            .filter(Boolean);
+        if (snapshots.length > 0) {
+            window.MindMapNodes?.removeNodes?.(_module, snapshots.map(snapshot => snapshot.nodeId));
+        }
+        _module.dotNetHelper.invokeMethodAsync('DeleteMultipleNodeSnapshotsFromJs', snapshots);
+
+        console.log(`[MultiSelect] Deleted ${selectedIds.length} nodes`);
+    }
+
+    // Update overlay position on camera move or node drag (called from animate loop)
+    // ▼▼▼ [Perf] Throttled and optimized for drag performance ▼▼▼
+    function updateMultiSelectOverlay() {
+        if (!_module || !multiSelectOverlay || multiSelectOverlay.style.display === 'none') return;
+
+        // Centralized drag-state sync from interactions module
+        const draggingNow = !!_module.isDraggingMultipleNodes;
+        if (draggingNow !== isDragging) {
+            isDragging = draggingNow;
+            lastUpdateTime = 0;
+            cachedImageNodeIds = isDragging ? getSelectedNodeIds() : null;
+        }
+
+        // Throttle updates during drag
+        const now = performance.now();
+        if (isDragging && now - lastUpdateTime < UPDATE_THROTTLE_MS) {
+            return;
+        }
+        lastUpdateTime = now;
+
+        // Use cached IDs during drag, recalculate only when not dragging
+        const selectedIds = isDragging && cachedImageNodeIds ? cachedImageNodeIds : getSelectedNodeIds();
+        if (selectedIds.length < 2) {
+            hide();
+            return;
+        }
+
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        // Use for loop instead of forEach for performance
+        for (let i = 0; i < selectedIds.length; i++) {
+            const nodeId = selectedIds[i];
+            const nodeEntry = _module.nodeObjectsById.get(nodeId);
+            if (!nodeEntry) continue;
+
+            const obj = nodeEntry.glObject || nodeEntry.cssObject;
+            if (!obj) continue;
+
+            const model = nodeEntry.model;
+            const x = obj.position.x;
+            const y = obj.position.y;
+            const w = model.width || 200;
+            const h = model.height || 200;
+
+            if (x < minX) minX = x;
+            if (x + w > maxX) maxX = x + w;
+            if (y - h < minY) minY = y - h;
+            if (y > maxY) maxY = y;
+        }
+
+        if (minX === Infinity) {
+            hide();
+            return;
+        }
+
+        // Add padding
+        const padding = 10;
+        currentBounds = {
+            minX: minX - padding,
+            minY: minY - padding,
+            maxX: maxX + padding,
+            maxY: maxY + padding
+        };
+
+        updateOverlayPosition(selectedIds);
+    }
+
+    function update() {
+        if (!_module) return;
+        updateMultiSelectOverlay();
+        updateSingleImageOverlay();
+    }
+    // ▲▲▲ [Perf] ▲▲▲
+
+    // ▼▼▼ [New] Dynamic menu button creation based on selection type ▼▼▼
+    function updateMenuButtons() {
+        if (!multiSelectMenu) return;
+
+        // Clear existing buttons
+        multiSelectMenu.innerHTML = '';
+
+        const imageNodeIds = getSelectedImageNodeIds();
+        const textNodeIds = getSelectedTextNodeIds();
+        const hasImages = imageNodeIds.length > 0;
+        const hasText = textNodeIds.length > 0;
+
+        // Determine which buttons to show
+        const buttons = [];
+
+        // Copy is always available
+        buttons.push({ icon: 'fa-regular fa-copy', title: 'Copy', action: 'copy', class: 'js-btn-multi-copy' });
+
+        const isMixedImageTextSelection = hasImages && hasText;
+
+        if (hasImages && !isMixedImageTextSelection) {
+            // Image layout organization actions
+            buttons.push({ icon: 'fa-solid fa-table-cells-large', title: 'Tidy masonry', action: 'masonry', class: 'js-btn-multi-masonry' });
+            buttons.push({ icon: 'fa-solid fa-border-all', title: 'Tidy grid', action: 'grid', class: 'js-btn-multi-grid' });
+            buttons.push({ icon: 'fa-solid fa-grip-lines', title: 'Tidy strip', action: 'stripHorizontal', class: 'js-btn-multi-strip' });
+
+            // Stack is only for image-only selection
+            if (!hasText) {
+                buttons.push({ icon: 'fa-solid fa-layer-group', title: 'Stack into pile', action: 'stack', class: 'js-btn-multi-stack' });
+            }
+        }
+
+        // Text-specific actions
+        if (hasText && !isMixedImageTextSelection) {
+            buttons.push({ icon: 'fa-solid fa-arrows-up-down', title: 'Fit text height', action: 'expand', class: 'js-btn-multi-expand' });
+        }
+
+        buttons.push({ separator: true });
+        buttons.push({ icon: 'fa-solid fa-trash', title: 'Delete all', action: 'delete', class: 'js-btn-multi-delete delete-btn' });
+
+        // Create buttons
+        buttons.forEach(btn => {
+            if (btn.separator) {
+                const sep = document.createElement('div');
+                sep.className = 'menu-separator';
+                sep.style.cssText = 'width: 1px; height: 20px; background-color: #e5e7eb; margin: 0 4px; align-self: center;';
+                multiSelectMenu.appendChild(sep);
+            } else {
+                const button = document.createElement('button');
+                button.className = `menu-btn ${btn.class}`;
+                button.title = btn.title;
+                button.innerHTML = `<i class="${btn.icon}"></i>`;
+                button.style.cssText = `
+                    width: 32px;
+                    height: 32px;
+                    border-radius: 6px;
+                    border: none;
+                    background: transparent;
+                    color: #4b5563;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: all 0.15s;
+                    font-size: 14px;
+                    line-height: 1;
+                `;
+                button.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    handleMenuAction(btn.action);
+                });
+                button.addEventListener('mousedown', e => e.stopPropagation());
+                multiSelectMenu.appendChild(button);
+            }
+        });
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    // Check if multiple supported nodes are selected and show/hide accordingly
+    function checkAndUpdateDisplay() {
+        if (!_module) return;
+
+        const nodeIds = getSelectedNodeIds();
+
+        if (nodeIds.length >= 2) {
+            updateMenuButtons(); // Update menu based on selection type
+            showMultiSelectBounds(nodeIds);
+            hideSingleImageOverlay();
+            // Hide single-node menu
+            if (window.MindMapMenuManager) {
+                window.MindMapMenuManager.hideMenu();
+            }
+        } else {
+            if (multiSelectOverlay) {
+                multiSelectOverlay.style.display = 'none';
+                multiSelectOverlay.style.visibility = 'hidden';
+            }
+            currentBounds = null;
+            initialNodeSizes.clear();
+            updateSingleImageOverlay();
+        }
+    }
+
+    window.MindMapMultiSelect = {
+        init,
+        showMultiSelectBounds,
+        hide,
+        update,
+        checkAndUpdateDisplay,
+        getSelectedImageNodeIds,
+        fitTextNodesToContentAndReflowY,
+        isResizing: () => isResizing,
+        handleResizeMove: onResizeMove,
+        handleResizeEnd: onResizeEnd
+    };
+
+    console.log('✅ mind-map-multi-select.js loaded');
+})();