@keenmate/svelte-treeview 4.4.0 → 4.5.0

package/README.md

@@ -2,8 +2,8 @@
 
 A high-performance, feature-rich hierarchical tree view component for Svelte 5 with drag & drop support, search functionality, and flexible data structures using LTree.
 
-> [!IMPORTANT]
-> **Looking for a framework-agnostic solution?** There's also a web component version that can be used standalone or in other frameworks at https://github.com/KeenMate/web-treeview/
+> [!TIP]
+> **v4.5.0 Performance Boost** - Optimized tree building algorithm now loads 17,000+ nodes in under 100ms (previously 85+ seconds). See [Performance](#-performance) for details.
 
 ## 🚀 Features
 
@@ -60,6 +60,28 @@ If using Vite, Webpack, or similar, you can import the SCSS:
 import '@keenmate/svelte-treeview/styles.scss';
 ```
 
+## ⚠️ Performance Warning: Use `$state.raw()` for Large Datasets
+
+> [!WARNING]
+> **When passing large arrays (1000+ items) to the Tree component, use `$state.raw()` instead of `$state()` to avoid severe performance issues.**
+
+Svelte 5's `$state()` creates deep proxies for all nested objects. With thousands of items, this causes massive overhead during tree operations.
+
+```typescript
+// ❌ SLOW - Each item becomes a Proxy (5000x slower with large datasets)
+let treeData = $state<TreeNode[]>([])
+
+// ✅ FAST - Items remain plain objects
+let treeData = $state.raw<TreeNode[]>([])
+```
+
+**Symptoms of this issue:**
+- Tree takes 15-90+ seconds to render with thousands of items
+- Console shows `[Violation] 'message' handler took XXXXms`
+- Same data loads instantly in isolated test
+
+The array itself remains reactive - only individual items lose deep reactivity (which Tree doesn't need).
+
 ## 🎯 Quick Start
 
 ```svelte
@@ -899,10 +921,23 @@ The component is optimized for large datasets:
 - **Async Search Indexing**: Uses `requestIdleCallback` for non-blocking search index building
 - **Accurate Search Results**: Search index only includes successfully inserted nodes, ensuring results match visible tree structure
 - **Consistent Visual Hierarchy**: Optimized CSS-based indentation prevents exponential spacing growth
-- **Virtual Scrolling**: (Coming soon)
-- **Lazy Loading**: (Coming soon)
 - **Search Indexing**: Uses FlexSearch for fast search operations
 
+### v4.5 Performance Improvements
+
+**Optimized `insertArray` algorithm** - Fixed O(n²) bottleneck that caused 85+ second load times with large datasets. Now loads 17,000+ nodes in under 100ms.
+
+**Performance Logging** - Built-in performance measurement for debugging:
+```typescript
+import { enablePerfLogging } from '@keenmate/svelte-treeview';
+enablePerfLogging();
+
+// Or from browser console:
+window.components['svelte-treeview'].perf.enable()
+```
+
+**Important**: See the [$state.raw() warning](#%EF%B8%8F-performance-warning-use-stateraw-for-large-datasets) above - using `$state()` instead of `$state.raw()` for tree data can cause 5,000x slowdown!
+
 ## 🤝 Contributing
 
 We welcome contributions! Please see our contributing guidelines for details.

package/dist/components/Node.svelte

@@ -1,8 +1,10 @@
 <script lang="ts" generics="T">
 	import {type LTreeNode} from "../ltree/ltree-node.svelte.js"
 	import Node from "./Node.svelte"
-	import {getContext, type Snippet} from "svelte"
-	import type {Ltree} from "../ltree/types.js"
+	import {getContext, onDestroy, type Snippet} from "svelte"
+	import type {Ltree, DropPosition, DropOperation} from "../ltree/types.js"
+	import type {RenderCoordinator} from "./RenderCoordinator.svelte.js"
+	import { uiLogger } from "../logger.js"
 
 	// Define component props interface
 	interface Props {
@@ -12,11 +14,22 @@
 		onNodeRightClicked?: (node: LTreeNode<T>, event: MouseEvent) => void;
 		onNodeDragStart?: (node: LTreeNode<T>, event: DragEvent) => void;
 		onNodeDragOver?: (node: LTreeNode<T>, event: DragEvent) => void;
+		onNodeDragLeave?: (node: LTreeNode<T>, event: DragEvent) => void;
 		onNodeDrop?: (node: LTreeNode<T>, event: DragEvent) => void;
+		onZoneDrop?: (node: LTreeNode<T>, position: DropPosition, event: DragEvent) => void;
+
+		// Touch drag handlers for mobile support
+		onTouchDragStart?: (node: LTreeNode<T>, event: TouchEvent) => void;
+		onTouchDragMove?: (node: LTreeNode<T>, event: TouchEvent) => void;
+		onTouchDragEnd?: (node: LTreeNode<T>, event: TouchEvent) => void;
 
 		// BEHAVIOUR
 		shouldToggleOnNodeClick?: boolean | null | undefined;
 
+		// Progressive rendering
+		progressiveRender?: boolean;
+		renderBatchSize?: number;
+
 		// VISUALS
 		expandIconClass?: string | null | undefined;
 		collapseIconClass?: string | null | undefined;
@@ -24,6 +37,19 @@
 		selectedNodeClass?: string | null | undefined;
 		dragOverNodeClass?: string | null | undefined;
 		isDraggedNode?: boolean | null | undefined;
+
+		// Drag position indicators
+		isDragInProgress?: boolean;
+		hoveredNodeForDropPath?: string | null; // Path of node being hovered for drop
+		activeDropPosition?: DropPosition | null;
+
+		// Drop zone configuration
+		dropZoneMode?: 'floating' | 'glow'; // 'floating' = original floating zones, 'glow' = border glow indicators
+		dropZoneLayout?: 'around' | 'above' | 'below' | 'wave' | 'wave2';
+		dropZoneStart?: number | string; // number = percentage (0-100), string = any CSS value ("33%", "50px", "3rem")
+		dropZoneMaxWidth?: number; // max width in pixels for wave layouts
+		dropOperation?: DropOperation; // Current drag operation ('move' or 'copy')
+		allowCopy?: boolean; // Whether copy operation is allowed (Ctrl+drag)
 	}
 
 	// Destructure props using Svelte 5 syntax
@@ -34,11 +60,22 @@
 		onNodeRightClicked,
 		onNodeDragStart,
 		onNodeDragOver,
+		onNodeDragLeave,
 		onNodeDrop,
+		onZoneDrop,
+
+		// Touch drag handlers for mobile support
+		onTouchDragStart,
+		onTouchDragMove,
+		onTouchDragEnd,
 
 		// BEHAVIOUR
 		shouldToggleOnNodeClick = true,
 
+		// Progressive rendering
+		progressiveRender = false,
+		renderBatchSize = 50,
+
 		// VISUALS
 		expandIconClass = "ltree-icon-expand",
 		collapseIconClass = "ltree-icon-collapse",
@@ -46,28 +83,155 @@
 		selectedNodeClass,
 		dragOverNodeClass,
 		isDraggedNode = false,
+
+		// Drag position indicators
+		isDragInProgress = false,
+		hoveredNodeForDropPath = null,
+		activeDropPosition = null,
+
+		// Drop zone configuration
+		dropZoneMode = 'glow',
+		dropZoneLayout = 'around',
+		dropZoneStart = 33,
+		dropZoneMaxWidth = 120,
+		dropOperation = 'move',
+		allowCopy = false,
 	}: Props = $props()
 
+	// Compute if THIS node is the one being hovered for drop
+	const isHoveredForDrop = $derived(hoveredNodeForDropPath === node.path)
+
+	// Format dropZoneStart - number = percentage, string = as-is
+	const formattedDropZoneStart = $derived(
+		typeof dropZoneStart === 'number' ? `${dropZoneStart}%` : dropZoneStart
+	)
+
 	const tree = getContext<Ltree<T>>("Ltree")
+	const renderCoordinator = getContext<RenderCoordinator | null>("RenderCoordinator")
 
 	// Drag over state
 	let isDraggedOver = $state(false);
 
+	// Track which drop zone is being hovered during drag (for floating mode)
+	let hoveredZone = $state<'above' | 'below' | 'child' | null>(null);
+
+	// Track glow position for glow mode
+	let glowPosition = $state<'above' | 'below' | 'child' | null>(null);
+
+	// Calculate glow position based on mouse position in the node row
+	function calculateGlowPosition(event: DragEvent, element: HTMLElement): 'above' | 'below' | 'child' {
+		const rect = element.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const y = event.clientY - rect.top;
+		const width = rect.width;
+		const height = rect.height;
+
+		// Right half = child
+		if (x > width / 2) {
+			return 'child';
+		}
+		// Left half, top 50% = above
+		if (y < height / 2) {
+			return 'above';
+		}
+		// Left half, bottom 50% = below
+		return 'below';
+	}
+
 	// Convert reactive statements to derived values
+	const childrenArray = $derived(Object.values(node?.children || []))
 	const childrenWithData = $derived(Object.values(node?.children || []))
 	const hasChildren = $derived(node?.hasChildren || false)
 	const indentStyle = $derived(
 		`margin-left: var(--tree-node-indent-per-level, 0.5rem)`,
 	)
 
+	// Progressive rendering state
+	let renderedCount = $state(0);
+	let unregisterFromCoordinator: (() => void) | null = null;
+	let lastExpandedState = false;
+	let lastChildrenLength = 0;
+
+	// Get the children to render (all or progressive slice)
+	const childrenToRender = $derived(
+		progressiveRender && renderCoordinator
+			? childrenArray.slice(0, renderedCount)
+			: childrenArray
+	);
+	const hasMoreToRender = $derived(
+		progressiveRender && renderCoordinator && renderedCount < childrenArray.length
+	);
+
+	// Handle expansion state changes - use coordinator for progressive rendering
+	// Only react to isExpanded changes, not renderedCount changes
+	$effect(() => {
+		const isExpanded = node?.isExpanded ?? false;
+		const childCount = childrenArray.length;
+		const shouldRenderProgressively = progressiveRender && renderCoordinator && childCount > 0;
+
+		// Only act on actual state changes
+		if (isExpanded !== lastExpandedState || childCount !== lastChildrenLength) {
+			lastExpandedState = isExpanded;
+			lastChildrenLength = childCount;
+
+			if (isExpanded && shouldRenderProgressively) {
+				// Clean up any existing registration first
+				if (unregisterFromCoordinator) {
+					unregisterFromCoordinator();
+					unregisterFromCoordinator = null;
+				}
+
+				// If this node was already fully rendered (component recreated after changeTracker update),
+				// render all children immediately instead of progressive rendering
+				if (renderCoordinator.isCompleted(node.path)) {
+					renderedCount = childCount;
+					return;
+				}
+
+				// Start with first batch immediately
+				renderedCount = Math.min(renderBatchSize, childCount);
+
+				// Register with coordinator if there are more children to render
+				if (renderedCount < childCount) {
+					unregisterFromCoordinator = renderCoordinator.register(node.path, () => {
+						// Render a batch of children per callback invocation
+						if (renderedCount < childCount) {
+							renderedCount = Math.min(renderedCount + renderBatchSize, childCount);
+							return renderedCount < childCount; // Return true if more work needed
+						}
+						return false;
+					});
+				}
+			} else if (!isExpanded) {
+				// Clean up when collapsed
+				if (unregisterFromCoordinator) {
+					unregisterFromCoordinator();
+					unregisterFromCoordinator = null;
+				}
+				renderedCount = 0;
+			}
+		}
+	});
+
+	// Clean up on component destroy
+	onDestroy(() => {
+		if (unregisterFromCoordinator) {
+			unregisterFromCoordinator();
+			unregisterFromCoordinator = null;
+		}
+	});
+
 	function toggleExpanded() {
 		if (node.hasChildren) {
-			node.isExpanded = !node.isExpanded
+			const newState = !node.isExpanded
+			uiLogger.debug(`${newState ? 'Expanding' : 'Collapsing'} node: ${node.path}`)
+			node.isExpanded = newState
 			tree.refresh()
 		}
 	}
 
 	function _onNodeClicked() {
+		uiLogger.debug(`Node clicked: ${node.path}`, { id: node.id, hasChildren: node.hasChildren })
 		onNodeClicked?.(node)
 		if (shouldToggleOnNodeClick) {
 			toggleExpanded()
@@ -105,6 +269,10 @@
 			class:ltree-clickable={node.isSelectable}
 			class:ltree-dragged={isDraggedNode}
 			class:ltree-draggable={node?.isDraggable}
+			class:ltree-glow-above={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'above'}
+			class:ltree-glow-below={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'below'}
+			class:ltree-glow-child={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'child'}
+			class:ltree-drop-copy={isDragInProgress && isHoveredForDrop && dropOperation === 'copy'}
 			draggable={node?.isDraggable}
 			onclick={(e) => {
 				e.stopPropagation();
@@ -116,41 +284,58 @@
 			}}
 			ondragstart={(e) => {
 				if (node?.isDraggable && e.dataTransfer) {
-					// e.stopPropagation();
-					e.dataTransfer.effectAllowed = "move";
+					e.dataTransfer.effectAllowed = allowCopy ? "copyMove" : "move";
 					e.dataTransfer.setData(
 						"application/svelte-treeview",
 						JSON.stringify(node),
 					);
-					console.log(
-						"dataTransfer types",
-						JSON.stringify(e.dataTransfer.types),
-					);
 					onNodeDragStart?.(node, e);
 				}
 			}}
 			ondragover={(e) => {
 				if (e.dataTransfer?.types.includes("application/svelte-treeview")) {
 					e.preventDefault();
+					// Set dropEffect directly from event to avoid timing issues with prop updates
+					if (e.dataTransfer) {
+						e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move';
+					}
 					isDraggedOver = true;
+					// In glow mode, calculate and update the glow position
+					if (dropZoneMode === 'glow') {
+						glowPosition = calculateGlowPosition(e, e.currentTarget as HTMLElement);
+					}
 				}
 				onNodeDragOver?.(node, e);
 			}}
 			ondragleave={(e) => {
-				// Only reset if we're actually leaving the node (not entering a child)
 				const rect = e.currentTarget.getBoundingClientRect();
 				const x = e.clientX;
 				const y = e.clientY;
 
 				if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
 					isDraggedOver = false;
+					glowPosition = null;
+					onNodeDragLeave?.(node, e);
 				}
 			}}
 			ondrop={(e) => {
 				e.stopPropagation();
+				// Confirm dropEffect for spec compliance
+				if (e.dataTransfer) {
+					e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move';
+				}
 				isDraggedOver = false;
-				onNodeDrop?.(node, e);
+				// In glow mode, use the calculated glowPosition for the drop
+				if (dropZoneMode === 'glow' && glowPosition) {
+					onZoneDrop?.(node, glowPosition, e);
+				} else {
+					onNodeDrop?.(node, e);
+				}
+				glowPosition = null;
 			}}
+			ontouchstart={(e) => onTouchDragStart?.(node, e)}
+			ontouchmove={(e) => onTouchDragMove?.(node, e)}
+			ontouchend={(e) => onTouchDragEnd?.(node, e)}
 		>
 			{#if children}
 				{@render children(node)}
@@ -158,11 +343,42 @@
 				{tree.getNodeDisplayValue(node)}
 			{/if}
 		</div>
+
+		<!-- Drop zones: positioned relative to .ltree-node-row (outside content to avoid padding issues) -->
+		<!-- Only render floating drop zones when in 'floating' mode -->
+		{#if dropZoneMode === 'floating' && isDragInProgress && isHoveredForDrop}
+			<div
+				class="ltree-drop-zones ltree-drop-zones-{dropZoneLayout}"
+				style="--drop-zone-start: {formattedDropZoneStart}; --drop-zone-max-width: {dropZoneMaxWidth}px;"
+			>
+				<div
+					class="ltree-drop-zone ltree-drop-above"
+					class:ltree-drop-zone-active={hoveredZone === 'above'}
+					ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'above'; onNodeDragOver?.(node, e); }}
+					ondragleave={() => { hoveredZone = null; }}
+					ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; onZoneDrop?.(node, 'above', e); }}
+				>↑ Above</div>
+				<div
+					class="ltree-drop-zone ltree-drop-below"
+					class:ltree-drop-zone-active={hoveredZone === 'below'}
+					ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'below'; onNodeDragOver?.(node, e); }}
+					ondragleave={() => { hoveredZone = null; }}
+					ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; onZoneDrop?.(node, 'below', e); }}
+				>↓ Below</div>
+				<div
+					class="ltree-drop-zone ltree-drop-child"
+					class:ltree-drop-zone-active={hoveredZone === 'child'}
+					ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'child'; onNodeDragOver?.(node, e); }}
+					ondragleave={() => { hoveredZone = null; }}
+					ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; onZoneDrop?.(node, 'child', e); }}
+				>→ Child</div>
+			</div>
+		{/if}
 	</div>
 
 	{#if node?.isExpanded && node?.hasChildren}
 		<div class="ltree-children">
-			{#each Object.values(node?.children) as item (item.id)}
+			{#each childrenToRender as item (item.id)}
 				<Node
 					node={item}
 					{children}
@@ -171,15 +387,36 @@
 					{onNodeRightClicked}
 					{onNodeDragStart}
 					{onNodeDragOver}
+					{onNodeDragLeave}
 					{onNodeDrop}
+					{onZoneDrop}
+					{onTouchDragStart}
+					{onTouchDragMove}
+					{onTouchDragEnd}
+					{progressiveRender}
+					{renderBatchSize}
 					{expandIconClass}
 					{collapseIconClass}
 					{leafIconClass}
 					{selectedNodeClass}
 					{dragOverNodeClass}
 					{isDraggedNode}
+					{isDragInProgress}
+					{hoveredNodeForDropPath}
+					{activeDropPosition}
+					{dropZoneMode}
+					{dropZoneLayout}
+					{dropZoneStart}
+					{dropZoneMaxWidth}
+					{dropOperation}
+					{allowCopy}
 				/>
 			{/each}
+			{#if hasMoreToRender}
+				<div class="ltree-loading-more">
+					Loading... ({renderedCount}/{childrenArray.length})
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>

package/dist/components/Node.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type LTreeNode } from "../ltree/ltree-node.svelte.js";
 import Node from "./Node.svelte";
 import { type Snippet } from "svelte";
+import type { DropPosition, DropOperation } from "../ltree/types.js";
 declare function $$render<T>(): {
     props: {
         node: LTreeNode<T>;
@@ -9,14 +10,30 @@ declare function $$render<T>(): {
         onNodeRightClicked?: (node: LTreeNode<T>, event: MouseEvent) => void;
         onNodeDragStart?: (node: LTreeNode<T>, event: DragEvent) => void;
         onNodeDragOver?: (node: LTreeNode<T>, event: DragEvent) => void;
+        onNodeDragLeave?: (node: LTreeNode<T>, event: DragEvent) => void;
         onNodeDrop?: (node: LTreeNode<T>, event: DragEvent) => void;
+        onZoneDrop?: (node: LTreeNode<T>, position: DropPosition, event: DragEvent) => void;
+        onTouchDragStart?: (node: LTreeNode<T>, event: TouchEvent) => void;
+        onTouchDragMove?: (node: LTreeNode<T>, event: TouchEvent) => void;
+        onTouchDragEnd?: (node: LTreeNode<T>, event: TouchEvent) => void;
         shouldToggleOnNodeClick?: boolean | null | undefined;
+        progressiveRender?: boolean;
+        renderBatchSize?: number;
         expandIconClass?: string | null | undefined;
         collapseIconClass?: string | null | undefined;
         leafIconClass?: string | null | undefined;
         selectedNodeClass?: string | null | undefined;
         dragOverNodeClass?: string | null | undefined;
         isDraggedNode?: boolean | null | undefined;
+        isDragInProgress?: boolean;
+        hoveredNodeForDropPath?: string | null;
+        activeDropPosition?: DropPosition | null;
+        dropZoneMode?: "floating" | "glow";
+        dropZoneLayout?: "around" | "above" | "below" | "wave" | "wave2";
+        dropZoneStart?: number | string;
+        dropZoneMaxWidth?: number;
+        dropOperation?: DropOperation;
+        allowCopy?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/components/RenderCoordinator.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Global render coordinator for progressive rendering.
+ * Manages a single render loop that processes all pending node renders
+ * instead of each node having its own RAF loop.
+ */
+type RenderCallback = () => boolean;
+export interface RenderStats {
+    pending: number;
+    processed: number;
+}
+export interface RenderCoordinatorCallbacks {
+    onStart?: () => void;
+    onProgress?: (stats: RenderStats) => void;
+    onComplete?: (stats: RenderStats) => void;
+}
+export interface RenderCoordinator {
+    /** Register a node's render callback. Returns an unregister function. */
+    register(id: string, callback: RenderCallback): () => void;
+    /** Check if coordinator is actively rendering */
+    isActive(): boolean;
+    /** Get stats for debugging */
+    getStats(): RenderStats;
+    /** Check if a node path was already fully rendered */
+    isCompleted(id: string): boolean;
+    /** Reset completed state (e.g., when tree data changes) */
+    reset(): void;
+}
+export declare function createRenderCoordinator(batchSize?: number, callbacks?: RenderCoordinatorCallbacks): RenderCoordinator;
+export {};

package/dist/components/RenderCoordinator.svelte.js

@@ -0,0 +1,115 @@
+/**
+ * Global render coordinator for progressive rendering.
+ * Manages a single render loop that processes all pending node renders
+ * instead of each node having its own RAF loop.
+ */
+import { renderLogger } from '../logger.js';
+export function createRenderCoordinator(batchSize = 100, callbacks) {
+    const pendingNodes = new Map();
+    const completedNodes = new Set(); // Track nodes that finished rendering
+    let rafId = null;
+    let isProcessing = false;
+    let processedCount = 0;
+    let wasActive = false;
+    function scheduleProcess() {
+        if (rafId !== null || pendingNodes.size === 0)
+            return;
+        rafId = requestAnimationFrame(() => {
+            rafId = null;
+            processFrame();
+        });
+    }
+    function processFrame() {
+        const frameStart = performance.now();
+        if (pendingNodes.size === 0) {
+            if (wasActive) {
+                isProcessing = false;
+                wasActive = false;
+                callbacks?.onComplete?.({ pending: 0, processed: processedCount });
+            }
+            return;
+        }
+        // Notify start on first frame
+        if (!wasActive) {
+            wasActive = true;
+            processedCount = 0;
+            callbacks?.onStart?.();
+        }
+        isProcessing = true;
+        let budget = batchSize;
+        const toRemove = [];
+        renderLogger.trace(`Frame start: pending=${pendingNodes.size}, budget=${budget}`);
+        // Process nodes until budget is exhausted
+        for (const [id, callback] of pendingNodes) {
+            if (budget <= 0)
+                break;
+            const callbackStart = performance.now();
+            const needsMore = callback();
+            const callbackTime = performance.now() - callbackStart;
+            if (callbackTime > 10) {
+                renderLogger.warn(`Slow callback: ${id} took ${callbackTime.toFixed(2)}ms`);
+            }
+            budget--;
+            processedCount++;
+            if (!needsMore) {
+                toRemove.push(id);
+            }
+        }
+        // Remove completed nodes and mark them as done
+        for (const id of toRemove) {
+            pendingNodes.delete(id);
+            completedNodes.add(id);
+        }
+        const frameTime = performance.now() - frameStart;
+        renderLogger.trace(`Frame end: processed ${batchSize - budget} nodes in ${frameTime.toFixed(2)}ms`);
+        // Notify progress
+        callbacks?.onProgress?.({ pending: pendingNodes.size, processed: processedCount });
+        // Schedule next frame if there's more work
+        if (pendingNodes.size > 0) {
+            scheduleProcess();
+        }
+        else {
+            isProcessing = false;
+            wasActive = false;
+            callbacks?.onComplete?.({ pending: 0, processed: processedCount });
+        }
+    }
+    return {
+        register(id, callback) {
+            // Skip if this node was already fully rendered
+            if (completedNodes.has(id)) {
+                return () => { }; // No-op unregister
+            }
+            pendingNodes.set(id, callback);
+            scheduleProcess();
+            // Return unregister function
+            return () => {
+                pendingNodes.delete(id);
+            };
+        },
+        isActive() {
+            return isProcessing || pendingNodes.size > 0;
+        },
+        getStats() {
+            return {
+                pending: pendingNodes.size,
+                processed: processedCount
+            };
+        },
+        isCompleted(id) {
+            return completedNodes.has(id);
+        },
+        reset() {
+            // Clear completed tracking when tree data changes
+            completedNodes.clear();
+            pendingNodes.clear();
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+            isProcessing = false;
+            wasActive = false;
+            processedCount = 0;
+        }
+    };
+}