@keenmate/svelte-treeview 4.7.0 → 4.8.0

package/dist/components/Tree.svelte

@@ -4,7 +4,7 @@
 	import { type LTreeNode } from '../ltree/ltree-node.svelte.js';
 	import { createLTree } from '../ltree/ltree.svelte.js';
 	import { type Ltree, type InsertArrayResult, type ContextMenuItem, type DropPosition, type DragDropMode, type DropOperation } from '../ltree/types.js';
-	import { setContext, tick } from 'svelte';
+	import { setContext, tick, untrack } from 'svelte';
 	import { createRenderCoordinator, type RenderCoordinator, type RenderStats } from './RenderCoordinator.svelte.js';
 	import { uiLogger, dragLogger } from '../logger.js';
 	import { perfStart, perfEnd } from '../perf-logger.js';
@@ -30,6 +30,7 @@
 		leafIconClass: string;
 		selectedNodeClass: string | null | undefined;
 		dragOverNodeClass: string | null | undefined;
+		dragDropMode: DragDropMode;
 		dropZoneMode: 'floating' | 'glow';
 		dropZoneLayout: 'around' | 'above' | 'below' | 'wave' | 'wave2';
 		dropZoneStart: number | string;
@@ -67,11 +68,17 @@
 
 	// Progressive rendering for flat mode
 	// Track which node IDs we've rendered and progressively add new ones
-	let flatRenderedIds = $state<Set<string>>(new Set());
-	let flatRenderQueue = $state<string[]>([]);
+	let flatRenderedIds = $state.raw<Set<string>>(new Set());
+	let flatRenderQueue = $state.raw<string[]>([]);
 	let flatRenderAnimationFrame: number | null = null;
 	let currentBatchSize: number = 0; // Exponential: doubles each batch up to maxBatchSize
 
+	// Virtual scrolling state
+	let vsScrollTop = $state(0);
+	let vsMeasuredRowHeight = $state<number | null>(null);
+	let vsContainerRef = $state<HTMLDivElement | undefined>();
+	let vsDetectedHeight = $state<string | null>(null);
+
 	// Drop placeholder state for empty trees
 	let isDropPlaceholderActive = $state(false);
 
@@ -81,6 +88,10 @@
 	let activeDropPosition = $state<DropPosition | null>(null);
 	let currentDropOperation = $state<DropOperation>('move');
 
+	// Floating drop zone overlay state (position: fixed to escape overflow clipping)
+	let floatingZoneRect = $state<{ top: number; left: number; width: number; height: number } | null>(null);
+	let floatingHoveredZone = $state<'above' | 'below' | 'child' | null>(null);
+
 	// Flag to skip insertArray during internal mutations (addNode, moveNode, removeNode)
 	let _skipInsertArray = false;
 
@@ -151,13 +162,19 @@
 		/**
 		 * Use flat/centralized rendering instead of recursive node rendering.
 		 * This significantly improves performance for large trees by:
-		 * - Removing the {#key changeTracker} block that destroys all nodes on any change
 		 * - Using a single flat loop instead of recursive component instantiation
 		 * - Allowing Svelte's keyed {#each} to efficiently diff only changed nodes
+		 * - Per-node reactive signals for O(1) data-only updates (updateNode, selection)
 		 */
 		useFlatRendering?: boolean;
-		/** Indentation per level in flat rendering mode (CSS value, default: '1.5rem') */
-		flatIndentSize?: string;
+		/** Enable virtual scrolling in flat mode. Only visible nodes + overscan are rendered. */
+		virtualScroll?: boolean;
+		/** Explicit row height in px. Auto-measured from first row if not set. */
+		virtualRowHeight?: number;
+		/** Extra rows above/below viewport (default: 5) */
+		virtualOverscan?: number;
+		/** CSS height for scroll container. Auto-detected from parent if not set, fallback 400px. */
+		virtualContainerHeight?: string;
 
 		// DRAG AND DROP
 		dragDropMode?: DragDropMode;
@@ -259,10 +276,15 @@
 
 		// Flat rendering mode
 		useFlatRendering = true,
-		flatIndentSize = '1.5rem',
+
+		// Virtual scrolling (flat mode only)
+		virtualScroll = false,
+		virtualRowHeight = undefined,
+		virtualOverscan = 5,
+		virtualContainerHeight = undefined,
 
 		// DRAG AND DROP
-		dragDropMode = 'both',
+		dragDropMode = 'none',
 		dropZoneMode = 'glow',
 		dropZoneLayout = 'around',
 		dropZoneStart = 33,
@@ -382,10 +404,12 @@
 	export function copyNodeWithDescendants(
 		sourceNode: LTreeNode<T>,
 		targetParentPath: string,
-		transformData: (data: T) => T
+		transformData: (data: T) => T,
+		siblingPath?: string,
+		position?: 'above' | 'below'
 	): { success: boolean; rootNode?: LTreeNode<T>; count: number; error?: string } {
 		_skipInsertArray = true;
-		const result = tree?.copyNodeWithDescendants(sourceNode, targetParentPath, transformData) || { success: false, count: 0, error: 'Tree not initialized' };
+		const result = tree?.copyNodeWithDescendants(sourceNode, targetParentPath, transformData, siblingPath, position) || { success: false, count: 0, error: 'Tree not initialized' };
 		tick().then(() => { _skipInsertArray = false; });
 		return result;
 	}
@@ -455,6 +479,65 @@
 			await tick();
 		}
 
+		// Helper: find DOM element and apply highlight
+		const applyHighlight = (elementId: string): boolean => {
+			const element = document.getElementById(elementId);
+			const contentDiv = element?.querySelector('.ltree-node-content') as HTMLElement | null;
+			if (!contentDiv) return false;
+
+			if (currentHighlight) {
+				currentHighlight.element.classList.remove(scrollHighlightClass!);
+				clearTimeout(currentHighlight.timeoutId);
+				currentHighlight = null;
+			}
+			contentDiv.classList.add(scrollHighlightClass!);
+			const timeoutId = setTimeout(() => {
+				contentDiv.classList.remove(scrollHighlightClass!);
+				currentHighlight = null;
+			}, scrollHighlightTimeout);
+			currentHighlight = { element: contentDiv, timeoutId };
+			return true;
+		};
+
+		// Virtual scroll: index-based scrolling instead of DOM query
+		if (vsActive && vsContainerRef) {
+			const nodeIndex = allFlatNodes.findIndex(n => n.path === path);
+			if (nodeIndex === -1) {
+				console.warn(`[Tree ${treeId}] Node not found in flat nodes for path: ${path}`);
+				perfEnd(`[${treeId}] scrollToPath`);
+				return false;
+			}
+
+			// Scroll virtual container to center the node
+			const targetScroll = nodeIndex * vsRowHeight
+				- (vsContainerRef.clientHeight / 2)
+				+ vsRowHeight / 2;
+			vsContainerRef.scrollTo({
+				top: Math.max(0, targetScroll),
+				behavior: scrollOptions?.behavior || 'smooth'
+			});
+
+			// Wait for scroll + re-render — need multiple frames for
+			// rAF-throttled scroll handler → reactive update → DOM render
+			await tick();
+			await new Promise(r => requestAnimationFrame(r));
+			await tick();
+			await new Promise(r => requestAnimationFrame(r));
+
+			if (highlight && scrollHighlightClass) {
+				const elementId = `${treeId}-${node.id}`;
+				if (!applyHighlight(elementId)) {
+					// Element might not be rendered yet — retry after another frame
+					await tick();
+					await new Promise(r => requestAnimationFrame(r));
+					applyHighlight(elementId);
+				}
+			}
+
+			perfEnd(`[${treeId}] scrollToPath`);
+			return true;
+		}
+
 		// Find the DOM element using the generated ID
 		const elementId = `${treeId}-${node.id}`;
 		const element = document.getElementById(elementId);
@@ -485,20 +568,7 @@
 
 		// Highlight the node temporarily if requested
 		if (highlight && scrollHighlightClass) {
-			// Clear previous highlight immediately (for rapid next/prev navigation)
-			if (currentHighlight) {
-				currentHighlight.element.classList.remove(scrollHighlightClass);
-				clearTimeout(currentHighlight.timeoutId);
-				currentHighlight = null;
-			}
-
-			contentDiv.classList.add(scrollHighlightClass);
-			const timeoutId = setTimeout(() => {
-				contentDiv.classList.remove(scrollHighlightClass);
-				currentHighlight = null;
-			}, scrollHighlightTimeout);
-
-			currentHighlight = { element: contentDiv, timeoutId };
+			applyHighlight(elementId);
 		}
 
 		perfEnd(`[${treeId}] scrollToPath`);
@@ -571,6 +641,10 @@
 				| "scrollHighlightClass"
 				| "contextMenuXOffset"
 				| "contextMenuYOffset"
+				| "virtualScroll"
+				| "virtualRowHeight"
+				| "virtualOverscan"
+				| "virtualContainerHeight"
 			>
 		>
 	) {
@@ -621,12 +695,21 @@
 		if (updates.scrollHighlightClass !== undefined) scrollHighlightClass = updates.scrollHighlightClass;
 		if (updates.contextMenuXOffset !== undefined) contextMenuXOffset = updates.contextMenuXOffset;
 		if (updates.contextMenuYOffset !== undefined) contextMenuYOffset = updates.contextMenuYOffset;
+		if (updates.virtualScroll !== undefined) virtualScroll = updates.virtualScroll;
+		if (updates.virtualRowHeight !== undefined) virtualRowHeight = updates.virtualRowHeight;
+		if (updates.virtualOverscan !== undefined) virtualOverscan = updates.virtualOverscan;
+		if (updates.virtualContainerHeight !== undefined) virtualContainerHeight = updates.virtualContainerHeight;
 	}
 
-	treeId = treeId || generateTreeId();
+	// Stable auto-generated treeId — survives parent re-renders that reset prop to undefined
+	const _autoTreeId = generateTreeId();
+	treeId = treeId || _autoTreeId;
+
+	// Keep treeId stable when parent re-renders without passing treeId prop
+	$effect.pre(() => {
+		if (!treeId) treeId = _autoTreeId;
+	});
 
-	if (shouldDisplayDebugInformation)
-		console.log("Tree treePathSeparator:", treePathSeparator)
 
 	// svelte-ignore non_reactive_update
 	const tree: Ltree<T> = createLTree<T>(
@@ -709,15 +792,18 @@
 		setContext('RenderCoordinator', renderCoordinator);
 	}
 
-	// Create stable config object - updated when props change
-	// Using $state.raw to avoid deep reactivity on the config object itself
-	let nodeConfig = $state.raw<NodeConfig>({
+	// Create stable config object shared via context.
+	// Must use $state (not $state.raw) so property mutations are tracked reactively.
+	// We mutate individual properties in the $effect below so that Node components
+	// (which hold the same proxy reference via getContext) see the updates.
+	let nodeConfig = $state<NodeConfig>({
 		shouldToggleOnNodeClick: shouldToggleOnNodeClick ?? true,
 		expandIconClass: expandIconClass ?? 'ltree-icon-expand',
 		collapseIconClass: collapseIconClass ?? 'ltree-icon-collapse',
 		leafIconClass: leafIconClass ?? 'ltree-icon-leaf',
 		selectedNodeClass,
 		dragOverNodeClass,
+		dragDropMode: dragDropMode ?? 'none',
 		dropZoneMode: dropZoneMode ?? 'glow',
 		dropZoneLayout: dropZoneLayout ?? 'around',
 		dropZoneStart: dropZoneStart ?? 33,
@@ -726,50 +812,34 @@
 	});
 	setContext('NodeConfig', nodeConfig);
 
-	// Update config when props change (rarely happens, but supports dynamic updates)
+	// Mutate the shared config proxy when props change
 	$effect(() => {
-		nodeConfig = {
-			shouldToggleOnNodeClick: shouldToggleOnNodeClick ?? true,
-			expandIconClass: expandIconClass ?? 'ltree-icon-expand',
-			collapseIconClass: collapseIconClass ?? 'ltree-icon-collapse',
-			leafIconClass: leafIconClass ?? 'ltree-icon-leaf',
-			selectedNodeClass,
-			dragOverNodeClass,
-			dropZoneMode: dropZoneMode ?? 'glow',
-			dropZoneLayout: dropZoneLayout ?? 'around',
-			dropZoneStart: dropZoneStart ?? 33,
-			dropZoneMaxWidth: dropZoneMaxWidth ?? 120,
-			allowCopy: allowCopy ?? false,
-		};
+		nodeConfig.shouldToggleOnNodeClick = shouldToggleOnNodeClick ?? true;
+		nodeConfig.expandIconClass = expandIconClass ?? 'ltree-icon-expand';
+		nodeConfig.collapseIconClass = collapseIconClass ?? 'ltree-icon-collapse';
+		nodeConfig.leafIconClass = leafIconClass ?? 'ltree-icon-leaf';
+		nodeConfig.selectedNodeClass = selectedNodeClass;
+		nodeConfig.dragOverNodeClass = dragOverNodeClass;
+		nodeConfig.dragDropMode = dragDropMode ?? 'none';
+		nodeConfig.dropZoneMode = dropZoneMode ?? 'glow';
+		nodeConfig.dropZoneLayout = dropZoneLayout ?? 'around';
+		nodeConfig.dropZoneStart = dropZoneStart ?? 33;
+		nodeConfig.dropZoneMaxWidth = dropZoneMaxWidth ?? 120;
+		nodeConfig.allowCopy = allowCopy ?? false;
 	});
 
-	$effect(() => {
-		tree.filterNodes(searchText);
-	});
+	// Format dropZoneStart for CSS variable - number = percentage, string = as-is
+	const formattedDropZoneStart = $derived(
+		typeof dropZoneStart === 'number' ? `${dropZoneStart}%` : dropZoneStart
+	);
 
-	// Performance instrumentation for flat mode
-	let flatRenderStart: number | null = null;
 	$effect(() => {
-		if (useFlatRendering && tree?.changeTracker) {
-			// changeTracker changed - flat render is about to happen
-			flatRenderStart = performance.now();
-			console.log('[Flat Mode] changeTracker changed, render starting...');
-
-			// Measure after Svelte processes the DOM update (single rAF = next paint)
-			requestAnimationFrame(() => {
-				if (flatRenderStart) {
-					const elapsed = performance.now() - flatRenderStart;
-					console.log(`[Flat Mode] DOM update complete: ${elapsed.toFixed(2)}ms`);
-					flatRenderStart = null;
-				}
-			});
-		}
+		tree.filterNodes(searchText);
 	});
 
 	$effect(() => {
 		if (tree && data) {
-			if (_skipInsertArray) {
-				console.log('[Tree] Skipping insertArray due to internal mutation');
+			if (untrack(() => _skipInsertArray)) {
 				_skipInsertArray = false; // Reset for next time
 				return;
 			}
@@ -779,7 +849,9 @@
 			flatRenderedIds = new Set();
 			flatRenderQueue = [];
 			currentBatchSize = 0; // Reset exponential batch size
-			console.log('[Tree] Running insertArray with', data.length, 'items');
+			// Reset virtual scroll measurements
+			vsMeasuredRowHeight = null;
+			vsDetectedHeight = null;
 			insertResult = tree.insertArray(data);
 		}
 	});
@@ -837,12 +909,10 @@
 
 			if (alreadyHasManyNodes && addingFewNodes) {
 				// Add all at once - one diff is faster than multiple diffs on large arrays
-				console.log(`[Flat Progressive] Adding ${newIds.length} nodes immediately (large tree optimization)`);
 				flatRenderedIds = new Set([...flatRenderedIds, ...newIds]);
 			} else {
 				// Progressive batching for initial load (exponential: 20 → 40 → 80 → 160...)
 				currentBatchSize = initialBatchSize; // Start with initial batch size
-				console.log(`[Flat Progressive] Queueing ${newIds.length} new nodes for progressive render (exponential batching)`);
 				const immediateBatch = newIds.slice(0, currentBatchSize);
 				const remaining = newIds.slice(currentBatchSize);
 
@@ -880,21 +950,84 @@
 			// Double batch size for next iteration (capped at maxBatchSize)
 			currentBatchSize = Math.min(batchSize * 2, maxBatchSize);
 
-			// console.log(`[Flat Progressive] Rendered batch of ${batch.length}, next batch: ${currentBatchSize}, ${remaining.length} remaining`);
-
 			if (remaining.length > 0) {
 				scheduleFlatRenderBatch();
 			}
 		});
 	}
 
-	// Derived: nodes to render in flat mode (filtered by progressive state)
-	const flatNodesToRender = $derived(
+	// Derived: all flat nodes (with progressive render filter if active)
+	const allFlatNodes = $derived(
 		useFlatRendering && progressiveRender
 			? tree?.visibleFlatNodes?.filter(n => flatRenderedIds.has(n.id)) ?? []
 			: tree?.visibleFlatNodes ?? []
 	);
 
+	// Virtual scrolling derived computations
+	const vsRowHeight = $derived(virtualRowHeight ?? vsMeasuredRowHeight ?? 32);
+	const vsActive = $derived(virtualScroll && useFlatRendering);
+	const vsContainerStyle = $derived(
+		virtualContainerHeight ?? vsDetectedHeight ?? '400px'
+	);
+	const vsTotalCount = $derived(allFlatNodes.length);
+	const vsTotalHeight = $derived(vsTotalCount * vsRowHeight);
+	const vsStartIndex = $derived(
+		vsActive
+			? Math.max(0, Math.floor(vsScrollTop / vsRowHeight) - virtualOverscan)
+			: 0
+	);
+	const vsEndIndex = $derived(
+		vsActive
+			? Math.min(vsTotalCount,
+				Math.ceil((vsScrollTop + (vsContainerRef?.clientHeight ?? 0)) / vsRowHeight) + virtualOverscan)
+			: vsTotalCount
+	);
+	const vsOffsetY = $derived(vsStartIndex * vsRowHeight);
+
+	// Final nodes to render — virtual window or all
+	const flatNodesToRender = $derived(
+		vsActive ? allFlatNodes.slice(vsStartIndex, vsEndIndex) : allFlatNodes
+	);
+
+	// Virtual scroll: rAF-throttled scroll handler
+	let vsRafPending = false;
+	function handleVirtualScroll(event: Event) {
+		if (vsRafPending) return;
+		vsRafPending = true;
+		requestAnimationFrame(() => {
+			vsScrollTop = (event.target as HTMLElement).scrollTop;
+			vsRafPending = false;
+		});
+	}
+
+	// Auto-measure row height from first rendered node
+	$effect(() => {
+		if (!vsActive || virtualRowHeight || vsMeasuredRowHeight) return;
+		if (allFlatNodes.length === 0) return;
+		tick().then(() => {
+			if (vsContainerRef) {
+				const firstNode = vsContainerRef.querySelector('.ltree-node');
+				if (firstNode) {
+					const height = firstNode.getBoundingClientRect().height;
+					if (height > 0) vsMeasuredRowHeight = height;
+				}
+			}
+		});
+	});
+
+	// Auto-detect container height from parent element
+	$effect(() => {
+		if (!vsActive || virtualContainerHeight || vsDetectedHeight) return;
+		tick().then(() => {
+			if (vsContainerRef?.parentElement) {
+				const parentHeight = vsContainerRef.parentElement.clientHeight;
+				if (parentHeight > 100) {
+					vsDetectedHeight = parentHeight + 'px';
+				}
+			}
+		});
+	});
+
 	// $inspect("tree change tracker", tree?.changeTracker?.toString());
 
 	function generateTreeId(): string {
@@ -912,10 +1045,12 @@
 			const previousNode = tree.getNodeByPath(selectedNode.path);
 			if (previousNode) {
 				previousNode.isSelected = false;
+				tree.bumpNodeRev(previousNode);
 			} else selectedNode = null;
 		}
 
 		node.isSelected = true;
+		tree.bumpNodeRev(node);
 		selectedNode = node;
 
 		uiLogger.debug(`Node selected: ${node.path}`, {
@@ -925,10 +1060,7 @@
 		});
 
 		onNodeClicked?.(node);
-
-		// if (!node.hasChildren) {
-		tree.refresh();
-		// }
+		// NO tree.refresh() — fine-grained signals handle re-rendering
 	}
 
 	function _onNodeRightClicked(node: LTreeNode<T>, event: MouseEvent) {
@@ -970,6 +1102,10 @@
 	}
 
 	function _onNodeDragStart(node: LTreeNode<T>, event: DragEvent) {
+		if (dragDropMode === 'none') {
+			event.preventDefault();
+			return;
+		}
 		dragLogger.debug(`Drag started: ${node.path}`, {
 			ctrlKey: event.ctrlKey,
 			allowCopy,
@@ -991,6 +1127,8 @@
 		activeDropPosition = null;
 		isDropPlaceholderActive = false;
 		currentDropOperation = 'move';
+		floatingZoneRect = null;
+		floatingHoveredZone = null;
 	}
 
 	/**
@@ -1039,9 +1177,6 @@
 		const isSameTreeDrag = draggedNode.treeId === treeId;
 		if (isSameTreeDrag && operation === 'move' && dropNode) {
 			const result = moveNode(draggedNode.path, dropNode.path, position);
-			if (shouldDisplayDebugInformation) {
-				console.log('[Tree] Auto-moved node:', result);
-			}
 			// Still call onNodeDrop for notification/logging
 			onNodeDrop?.(dropNode, draggedNode, position, event, operation);
 			return result.success;
@@ -1066,9 +1201,6 @@
 				siblingPath,
 				copyPosition
 			);
-			if (shouldDisplayDebugInformation) {
-				console.log('[Tree] Auto-copied node:', result);
-			}
 			// Still call onNodeDrop for notification/logging
 			onNodeDrop?.(dropNode, draggedNode, position, event, operation);
 			return result.success;
@@ -1105,9 +1237,6 @@
 			: isDropAllowedByMode(effectiveDraggedNode?.treeId);
 
 		if (!dropAllowed) {
-			if (shouldDisplayDebugInformation) {
-				console.log('[Tree] Drop not allowed:', { treeId, dragDropMode, isCrossTreeDrag, effectiveDraggedNodeTreeId: effectiveDraggedNode?.treeId });
-			}
 			hoveredNodeForDrop = null;  // Clear hover to prevent glow on invalid targets
 			return;
 		}
@@ -1129,12 +1258,17 @@
 				activeDropPosition = calculateDropPosition(event, nodeElement);
 			}
 
+			// Capture node row rect for floating drop zone overlay
+			if (dropZoneMode === 'floating') {
+				const nodeRow = (event.target as Element).closest('.ltree-node-row');
+				if (nodeRow) {
+					const r = nodeRow.getBoundingClientRect();
+					floatingZoneRect = { top: r.top, left: r.left, width: r.width, height: r.height };
+				}
+			}
+
 			// Update current operation based on Ctrl key
-			const prevOperation = currentDropOperation;
 			currentDropOperation = (allowCopy && event.ctrlKey) ? 'copy' : 'move';
-			if (shouldDisplayDebugInformation && prevOperation !== currentDropOperation) {
-				console.log('[Tree] _onNodeDragOver - operation changed:', prevOperation, '->', currentDropOperation, 'ctrlKey:', event.ctrlKey, 'allowCopy:', allowCopy);
-			}
 
 			onNodeDragOver?.(node, event);
 
@@ -1151,12 +1285,6 @@
 	}
 
 	function _onNodeDrop(node: LTreeNode<T>, event: DragEvent) {
-		if (shouldDisplayDebugInformation)
-			console.log(
-				'🚀 ~ _onNodeDrop ~ _onNodeDrop:',
-				_onNodeDrop,
-				event.dataTransfer?.getData('application/svelte-treeview')
-			);
 		event.preventDefault();
 
 		let isCrossTreeDrag = false;
@@ -1191,10 +1319,8 @@
 
 	// Zone drop handler - receives explicit position from drop zone panels
 	function _onZoneDrop(node: LTreeNode<T>, position: DropPosition, event: DragEvent) {
-		if (shouldDisplayDebugInformation)
-			console.log('🎯 ~ _onZoneDrop ~ position:', position, 'node:', node.path);
-
 		event.preventDefault();
+		console.log(`[ZoneDrop] dropNode=${node.path}, position=${position}, treeId=${treeId}`);
 
 		let isCrossTreeDrag = false;
 		if (!draggedNode) {
@@ -1206,16 +1332,20 @@
 		}
 
 		if (!draggedNode) {
+			console.warn(`[ZoneDrop] No draggedNode found, aborting`);
 			_onNodeDragEnd(event);
 			return;
 		}
 
+		console.log(`[ZoneDrop] draggedNode=${draggedNode.path} (treeId=${draggedNode.treeId}), isCrossTree=${isCrossTreeDrag}`);
+
 		// Check if drop is allowed by mode
 		const dropAllowed = isCrossTreeDrag
 			? (dragDropMode === 'both' || dragDropMode === 'cross')
 			: isDropAllowedByMode(draggedNode?.treeId);
 
 		if (!dropAllowed) {
+			console.warn(`[ZoneDrop] Drop not allowed by mode=${dragDropMode}`);
 			_onNodeDragEnd(event);
 			return;
 		}
@@ -1223,14 +1353,53 @@
 		// For cross-tree, always allow; for same-tree, check it's not the same node
 		if (isCrossTreeDrag || draggedNode !== node) {
 			_handleDrop(node, draggedNode, position, event);
+		} else {
+			console.warn(`[ZoneDrop] Same node — skipped`);
 		}
 
 		// Reset drag state
 		_onNodeDragEnd(event);
 	}
 
+	// Floating drop zone overlay helpers
+	function isFloatingPositionAllowed(position: DropPosition): boolean {
+		if (!hoveredNodeForDrop) return false;
+		const allowed = tree.getNodeAllowedDropPositions(hoveredNodeForDrop);
+		if (!allowed || allowed.length === 0) return true;
+		return allowed.includes(position);
+	}
+
+	function handleFloatingZoneDragOver(position: DropPosition, event: DragEvent) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = (allowCopy && event.ctrlKey) ? 'copy' : 'move';
+		floatingHoveredZone = position;
+		// Keep rect fresh (handles scroll while cursor on zone)
+		if (hoveredNodeForDrop && treeContainerRef) {
+			const nodeEl = treeContainerRef.querySelector(`#${treeId}-${hoveredNodeForDrop.id}`);
+			const nodeRow = nodeEl?.querySelector('.ltree-node-row');
+			if (nodeRow) {
+				const r = nodeRow.getBoundingClientRect();
+				floatingZoneRect = { top: r.top, left: r.left, width: r.width, height: r.height };
+			}
+		}
+		if (hoveredNodeForDrop) _onNodeDragOver(hoveredNodeForDrop, event);
+	}
+
+	function handleFloatingZoneDragLeave() {
+		floatingHoveredZone = null;
+	}
+
+	function handleFloatingZoneDrop(position: DropPosition, event: DragEvent) {
+		event.stopPropagation();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = (allowCopy && event.ctrlKey) ? 'copy' : 'move';
+		console.log(`[FloatingZoneDrop] position=${position}, hoveredNode=${hoveredNodeForDrop?.path ?? 'null'}`);
+		floatingHoveredZone = null;
+		if (hoveredNodeForDrop) _onZoneDrop(hoveredNodeForDrop, position, event);
+	}
+
 	// Touch drag handlers for mobile support
 	function _onTouchStart(node: LTreeNode<any>, event: TouchEvent) {
+		if (dragDropMode === 'none') return;
 		if (!node?.isDraggable) return;
 
 		const touch = event.touches[0];
@@ -1399,16 +1568,15 @@
 
 	// Empty tree drop handlers
 	function handleEmptyTreeDragOver(event: DragEvent) {
-		console.log('[EmptyTree] dragover/dragenter fired', {
-			types: event.dataTransfer?.types,
-			hasTreeviewType: event.dataTransfer?.types.includes("application/svelte-treeview"),
-			isDropPlaceholderActive,
-			treeId
-		});
+		if (dragDropMode === 'none') return;
 		if (event.dataTransfer?.types.includes("application/svelte-treeview")) {
+			// Check mode: for cross-tree drags, only allow if mode permits
+			const isCrossTree = !draggedNode; // If draggedNode is null, it's from another tree
+			if (isCrossTree && dragDropMode === 'self') return;
+			if (!isCrossTree && dragDropMode === 'cross') return;
+
 			event.preventDefault();
 			isDropPlaceholderActive = true;
-			console.log('[EmptyTree] isDropPlaceholderActive set to true');
 			if (event.dataTransfer) {
 				event.dataTransfer.dropEffect = 'move';
 			}
@@ -1421,46 +1589,31 @@
 		const x = event.clientX;
 		const y = event.clientY;
 
-		console.log('[EmptyTree] dragleave fired', {
-			x, y,
-			rect: { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom },
-			isOutside: x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom,
-			treeId
-		});
-
 		if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
 			isDropPlaceholderActive = false;
-			console.log('[EmptyTree] isDropPlaceholderActive set to false (left element)');
 		}
 	}
 
 	function handleEmptyTreeDrop(event: DragEvent) {
-		console.log('[EmptyTree] drop fired', {
-			types: event.dataTransfer?.types,
-			data: event.dataTransfer?.getData('application/svelte-treeview'),
-			treeId
-		});
+		if (dragDropMode === 'none') return;
 		event.preventDefault();
 		isDropPlaceholderActive = false;
 
 		const draggedNodeData = event.dataTransfer?.getData('application/svelte-treeview');
 		if (draggedNodeData) {
 			const droppedNode = JSON.parse(draggedNodeData);
-			console.log('[EmptyTree] calling _handleDrop with', { droppedNode });
+			// Respect dragDropMode for empty tree drops too
+			const isCrossTree = droppedNode?.treeId !== treeId;
+			if (isCrossTree && dragDropMode === 'self') return;
+			if (!isCrossTree && dragDropMode === 'cross') return;
+
 			// Call onNodeDrop with null as dropNode to indicate "root level drop"
 			_handleDrop(null, droppedNode, 'child', event);
-		} else {
-			console.log('[EmptyTree] no draggedNodeData found!');
 		}
 		_onNodeDragEnd(event);
 	}
 
 	function handleEmptyTreeTouchEnd(event: TouchEvent) {
-		console.log('[EmptyTree] touchend fired', {
-			draggedNode,
-			isDropPlaceholderActive,
-			treeId
-		});
 		// Check if touch drag was active and we have a dragged node
 		if (draggedNode && isDropPlaceholderActive) {
 			_handleDrop(null, draggedNode, 'child', event);
@@ -1476,6 +1629,11 @@
 	}
 
 	function handleTreeDragLeave(event: DragEvent) {
+		// Don't reset if moving to a child element (including fixed-position floating zones)
+		if (event.relatedTarget instanceof Node && (event.currentTarget as HTMLElement).contains(event.relatedTarget as globalThis.Node)) {
+			return;
+		}
+
 		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
 		const x = event.clientX;
 		const y = event.clientY;
@@ -1487,6 +1645,8 @@
 				isDragInProgress = false;
 				hoveredNodeForDrop = null;
 				activeDropPosition = null;
+				floatingZoneRect = null;
+				floatingHoveredZone = null;
 			}
 		}
 	}
@@ -1512,9 +1672,6 @@
 			};
 
 			const handleGlobalScroll = (event?: Event) => {
-				if (shouldDisplayDebugInformation) {
-					console.log(`[Tree ${treeId}] Scroll/wheel event detected, closing context menu`, event?.type);
-				}
 				closeContextMenu();
 			};
 
@@ -1553,10 +1710,6 @@
 				contextMenuY = treeRect.top + 100;  // 100px from tree's top edge
 				contextMenuVisible = true;
 				isDebugMenuActive = true;
-
-				if (shouldDisplayDebugInformation) {
-					console.log(`[Tree ${treeId}] Debug context menu displayed for node:`, targetNode.data, `at position (${contextMenuX}, ${contextMenuY})`);
-				}
 			}
 		} else if (!shouldDisplayContextMenuInDebugMode && isDebugMenuActive) {
 			// Only hide the context menu if it was opened by debug mode
@@ -1609,50 +1762,108 @@
 		</div>
 	{/if}
 
-	<div class:bodyClass>
+	<div class={bodyClass}>
 		{#if tree?.root}
 			<!-- Flat rendering mode: no {#key} block, uses visibleFlatNodes for efficient updates -->
 			{#if useFlatRendering}
-				<div class="ltree-tree ltree-flat-mode">
-					{#each flatNodesToRender as node (node.id + '|' + node.path + '|' + node.hasChildren)}
-						<Node
-							{node}
-							children={nodeTemplate}
-							progressiveRender={false}
-							isDraggedNode={draggedNode?.path === node.path}
-							{isDragInProgress}
-							hoveredNodeForDropPath={hoveredNodeForDrop?.path}
-							{activeDropPosition}
-							dropOperation={currentDropOperation}
-							flatMode={true}
-							{flatIndentSize}
-						/>
-					{:else}
-						<!-- Empty state when tree has no items -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
-							class="ltree-empty-state"
-							class:ltree-drop-placeholder={isDropPlaceholderActive}
-							ondragenter={handleEmptyTreeDragOver}
-							ondragover={handleEmptyTreeDragOver}
-							ondragleave={handleEmptyTreeDragLeave}
-							ondrop={handleEmptyTreeDrop}
-							ontouchend={handleEmptyTreeTouchEnd}
-						>
-							{#if isDropPlaceholderActive}
-								{#if dropPlaceholder}
-									{@render dropPlaceholder()}
+				{#if vsActive}
+					<!-- Virtual scrolling mode -->
+					<div
+						class="ltree-tree ltree-flat-mode ltree-virtual-scroll"
+						style="height: {vsContainerStyle}; overflow-y: auto;"
+						bind:this={vsContainerRef}
+						onscroll={handleVirtualScroll}
+					>
+						<!-- Spacer for correct scrollbar -->
+						<div style="height: {vsTotalHeight}px; position: relative;">
+							<!-- Rendered window at correct offset -->
+							<div style="transform: translateY({vsOffsetY}px);">
+								{#each flatNodesToRender as node, i (node.id + '|' + node.path + '|' + node.hasChildren + '|' + node._rev)}
+									{@const prevNode = (vsStartIndex + i) > 0 ? allFlatNodes[vsStartIndex + i - 1] : null}
+									<Node
+										{node}
+										children={nodeTemplate}
+										progressiveRender={false}
+										isDraggedNode={draggedNode?.path === node.path}
+										{isDragInProgress}
+										hoveredNodeForDropPath={hoveredNodeForDrop?.path}
+										{activeDropPosition}
+										dropOperation={currentDropOperation}
+										flatMode={true}
+										flatGap={prevNode != null && node.level > prevNode.level}
+									/>
 								{:else}
-									<div class="ltree-drop-placeholder-content">
-										Drop here to add
+									<!-- Empty state when tree has no items -->
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
+									<div
+										class="ltree-empty-state"
+										class:ltree-drop-placeholder={isDropPlaceholderActive}
+										ondragenter={handleEmptyTreeDragOver}
+										ondragover={handleEmptyTreeDragOver}
+										ondragleave={handleEmptyTreeDragLeave}
+										ondrop={handleEmptyTreeDrop}
+										ontouchend={handleEmptyTreeTouchEnd}
+									>
+										{#if isDropPlaceholderActive}
+											{#if dropPlaceholder}
+												{@render dropPlaceholder()}
+											{:else}
+												<div class="ltree-drop-placeholder-content">
+													Drop here to add
+												</div>
+											{/if}
+										{:else}
+											{@render noDataFound?.()}
+										{/if}
 									</div>
-								{/if}
-							{:else}
-								{@render noDataFound?.()}
-							{/if}
+								{/each}
+							</div>
 						</div>
-					{/each}
-				</div>
+					</div>
+				{:else}
+					<!-- Non-virtual flat rendering -->
+					<div class="ltree-tree ltree-flat-mode">
+						{#each flatNodesToRender as node, i (node.id + '|' + node.path + '|' + node.hasChildren + '|' + node._rev)}
+							{@const prevNode = i > 0 ? flatNodesToRender[i - 1] : null}
+							<Node
+								{node}
+								children={nodeTemplate}
+								progressiveRender={false}
+								isDraggedNode={draggedNode?.path === node.path}
+								{isDragInProgress}
+								hoveredNodeForDropPath={hoveredNodeForDrop?.path}
+								{activeDropPosition}
+								dropOperation={currentDropOperation}
+								flatMode={true}
+								flatGap={prevNode != null && node.level > prevNode.level}
+							/>
+						{:else}
+							<!-- Empty state when tree has no items -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<div
+								class="ltree-empty-state"
+								class:ltree-drop-placeholder={isDropPlaceholderActive}
+								ondragenter={handleEmptyTreeDragOver}
+								ondragover={handleEmptyTreeDragOver}
+								ondragleave={handleEmptyTreeDragLeave}
+								ondrop={handleEmptyTreeDrop}
+								ontouchend={handleEmptyTreeTouchEnd}
+							>
+								{#if isDropPlaceholderActive}
+									{#if dropPlaceholder}
+										{@render dropPlaceholder()}
+									{:else}
+										<div class="ltree-drop-placeholder-content">
+											Drop here to add
+										</div>
+									{/if}
+								{:else}
+									{@render noDataFound?.()}
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
 			{:else}
 				<!-- Recursive rendering mode: uses {#key} block for forced re-renders -->
 				{#key tree.changeTracker}
@@ -1726,6 +1937,40 @@
 
 	{@render treeFooter?.()}
 
+	<!-- Floating drop zones overlay (position: fixed to escape overflow containers) -->
+	{#if dropZoneMode === 'floating' && isDragInProgress && hoveredNodeForDrop && floatingZoneRect}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="ltree-drop-zones ltree-drop-zones-{dropZoneLayout}"
+			style="position: fixed; top: {floatingZoneRect.top}px; left: {floatingZoneRect.left}px; width: {floatingZoneRect.width}px; height: {floatingZoneRect.height}px; z-index: 10000; --drop-zone-start: {formattedDropZoneStart}; --drop-zone-max-width: {dropZoneMaxWidth}px;"
+		>
+			{#if isFloatingPositionAllowed('above')}
+				<div class="ltree-drop-zone ltree-drop-above"
+					class:ltree-drop-zone-active={floatingHoveredZone === 'above'}
+					ondragover={(e) => handleFloatingZoneDragOver('above', e)}
+					ondragleave={handleFloatingZoneDragLeave}
+					ondrop={(e) => handleFloatingZoneDrop('above', e)}
+				>↑ Above</div>
+			{/if}
+			{#if isFloatingPositionAllowed('below')}
+				<div class="ltree-drop-zone ltree-drop-below"
+					class:ltree-drop-zone-active={floatingHoveredZone === 'below'}
+					ondragover={(e) => handleFloatingZoneDragOver('below', e)}
+					ondragleave={handleFloatingZoneDragLeave}
+					ondrop={(e) => handleFloatingZoneDrop('below', e)}
+				>↓ Below</div>
+			{/if}
+			{#if isFloatingPositionAllowed('child')}
+				<div class="ltree-drop-zone ltree-drop-child"
+					class:ltree-drop-zone-active={floatingHoveredZone === 'child'}
+					ondragover={(e) => handleFloatingZoneDragOver('child', e)}
+					ondragleave={handleFloatingZoneDragLeave}
+					ondrop={(e) => handleFloatingZoneDrop('child', e)}
+				>→ Child</div>
+			{/if}
+		</div>
+	{/if}
+
 	<!-- Context Menu -->
 	{#if contextMenuVisible && contextMenuNode}
 		<div class="ltree-context-menu" style="left: {contextMenuX}px; top: {contextMenuY}px;">