@keenmate/svelte-treeview 4.5.0 → 4.6.0

package/README.md

@@ -2,14 +2,15 @@
 
 A high-performance, feature-rich hierarchical tree view component for Svelte 5 with drag & drop support, search functionality, and flexible data structures using LTree.
 
-> [!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.
+> [!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/
 
 ## 🚀 Features
 
 - **Svelte 5 Native**: Built specifically for Svelte 5 with full support for runes and modern Svelte patterns
-- **High Performance**: Uses LTree data structure for efficient hierarchical data management
-- **Drag & Drop**: Built-in drag and drop support with validation and visual feedback
+- **High Performance**: Flat rendering mode with progressive loading for 5000+ nodes
+- **Drag & Drop**: Built-in drag and drop with position control (above/below/child), touch support, and async validation
+- **Tree Editing**: Built-in methods for add, move, remove operations with automatic path management
 - **Search & Filter**: Integrated FlexSearch for fast, full-text search capabilities
 - **Flexible Data Sources**: Works with any hierarchical data structure
 - **Context Menus**: Dynamic right-click menus with callback-based generation, icons, disabled states
@@ -82,6 +83,40 @@ let treeData = $state.raw<TreeNode[]>([])
 
 The array itself remains reactive - only individual items lose deep reactivity (which Tree doesn't need).
 
+## 📢 New in v4.6: Progressive Flat Rendering
+
+> [!NOTE]
+> **The tree now uses progressive flat rendering by default for significantly improved performance.**
+
+**What this means:**
+- The tree renders immediately with the first batch of nodes (~200 by default)
+- Remaining nodes are rendered progressively in subsequent frames
+- For large trees (5000+ nodes), you'll see nodes appear over ~100-500ms instead of a single long freeze
+- The UI remains responsive during rendering
+
+**Configuration options:**
+```svelte
+<Tree
+  {data}
+  useFlatRendering={true}   <!-- Default: true (flat mode) -->
+  progressiveRender={true}  <!-- Default: true (batched rendering) -->
+  initialBatchSize={20}     <!-- First batch size (default: 20) -->
+  maxBatchSize={500}        <!-- Maximum batch size cap (default: 500) -->
+/>
+```
+
+**Exponential batching:** The first batch renders 20 nodes instantly, then doubles each frame (20 → 40 → 80 → 160 → 320 → 500...) for optimal perceived performance.
+
+**To use the legacy recursive rendering:**
+```svelte
+<Tree
+  {data}
+  useFlatRendering={false}  <!-- Uses recursive Node components -->
+/>
+```
+
+Recursive mode may be preferred for very small trees or when you need the `{#key changeTracker}` behavior that recreates all nodes on any change.
+
 ## 🎯 Quick Start
 
 ```svelte
@@ -237,49 +272,124 @@ For complete FlexSearch documentation, visit: [FlexSearch Options](https://githu
 ```svelte
 <script lang="ts">
   import { Tree } from '@keenmate/svelte-treeview';
-  
-  const sourceData = [
-    { path: '1', name: 'Item 1', isDraggable: true },
-    { path: '2', name: 'Item 2', isDraggable: true }
-  ];
-  
-  const targetData = [
-    { path: 'zone1', name: 'Drop Zone 1' },
-    { path: 'zone2', name: 'Drop Zone 2' }
+
+  let treeRef: Tree<MyNode>;
+
+  const data = [
+    { path: '1', name: 'Folder 1', isDraggable: true },
+    { path: '1.1', name: 'Item 1', isDraggable: true },
+    { path: '2', name: 'Folder 2', isDraggable: true }
   ];
-  
+
   function onDragStart(node, event) {
     console.log('Dragging:', node.data.name);
   }
-  
-  function onDrop(dropNode, draggedNode, event) {
-    console.log(`Dropped ${draggedNode.data.name} onto ${dropNode.data.name}`);
-    // Handle the drop logic here
+
+  // Same-tree moves are auto-handled - this callback is for notification/custom logic
+  function onDrop(dropNode, draggedNode, position, event, operation) {
+    console.log(`Dropped ${draggedNode.data.name} ${position} ${dropNode?.data.name}`);
+    // position is 'above', 'below', or 'child'
+    // operation is 'move' or 'copy' (Ctrl+drag)
   }
 </script>
 
-<div class="row">
-  <div class="col-6">
-    <Tree
-      data={sourceData}
-      idMember="path"
-      pathMember="path"
-      onNodeDragStart={onDragStart}
-    />
-  </div>
-  
-  <div class="col-6">
-    <Tree
-      data={targetData}
-      idMember="path"
-      pathMember="path"
-      dragOverNodeClass="ltree-dragover-highlight"
-      onNodeDrop={onDrop}
-    />
-  </div>
-</div>
+<Tree
+  bind:this={treeRef}
+  {data}
+  idMember="path"
+  pathMember="path"
+  orderMember="sortOrder"
+  dragOverNodeClass="ltree-dragover-highlight"
+  onNodeDragStart={onDragStart}
+  onNodeDrop={onDrop}
+/>
 ```
 
+#### Drop Position Control
+
+When using `dropZoneMode="floating"` (default), users can choose where to drop:
+- **Above**: Insert as sibling before the target node
+- **Below**: Insert as sibling after the target node
+- **Child**: Insert as child of the target node
+
+#### Async Drop Validation
+
+Use `beforeDropCallback` to validate or modify drops, including async operations like confirmation dialogs:
+
+```svelte
+<script lang="ts">
+  async function beforeDrop(dropNode, draggedNode, position, event, operation) {
+    // Cancel specific drops
+    if (draggedNode.data.locked) {
+      return false; // Cancel the drop
+    }
+
+    // Show confirmation dialog (async)
+    if (position === 'child' && !dropNode.data.isFolder) {
+      const confirmed = await showConfirmDialog('Drop as sibling instead?');
+      if (!confirmed) return false;
+      return { position: 'below' }; // Override position
+    }
+
+    // Proceed normally
+    return true;
+  }
+</script>
+
+<Tree
+  {data}
+  beforeDropCallback={beforeDrop}
+  onNodeDrop={onDrop}
+/>
+```
+
+### Tree Editing
+
+The tree provides built-in methods for programmatic editing:
+
+```svelte
+<script lang="ts">
+  import { Tree } from '@keenmate/svelte-treeview';
+
+  let treeRef: Tree<MyNode>;
+
+  // Add a new node
+  function addChild() {
+    const result = treeRef.addNode(
+      selectedNode?.path || '', // parent path (empty = root)
+      { id: Date.now(), path: '', name: 'New Item', sortOrder: 100 }
+    );
+    if (result.success) {
+      console.log('Added:', result.node);
+    }
+  }
+
+  // Move a node
+  function moveUp() {
+    const siblings = treeRef.getSiblings(selectedNode.path);
+    const index = siblings.findIndex(s => s.path === selectedNode.path);
+    if (index > 0) {
+      treeRef.moveNode(selectedNode.path, siblings[index - 1].path, 'above');
+    }
+  }
+
+  // Remove a node
+  function remove() {
+    treeRef.removeNode(selectedNode.path);
+  }
+</script>
+
+<Tree
+  bind:this={treeRef}
+  {data}
+  idMember="id"
+  pathMember="path"
+  orderMember="sortOrder"
+/>
+```
+
+**Note**: When using `orderMember`, the tree automatically calculates sort order values when moving nodes with 'above' or 'below' positions.
+
 ### With Context Menus
 
 The tree supports context menus with two approaches: callback-based (recommended) and snippet-based.
@@ -531,6 +641,10 @@ Without both requirements, no search indexing will occur.
 |------|------|---------|-------------|
 | `expandLevel` | `number \| null` | `2` | Automatically expand nodes up to this level |
 | `shouldToggleOnNodeClick` | `boolean` | `true` | Toggle expansion on node click |
+| `useFlatRendering` | `boolean` | `true` | Use flat rendering mode (faster for large trees) |
+| `progressiveRender` | `boolean` | `true` | Progressively render nodes in batches |
+| `renderBatchSize` | `number` | `50` | Number of nodes to render per batch |
+| `orderMember` | `string \| null` | `null` | Property name for sort order (enables above/below positioning in drag-drop) |
 | `indexerBatchSize` | `number \| null` | `25` | Number of nodes to process per batch during search indexing |
 | `indexerTimeout` | `number \| null` | `50` | Maximum time (ms) to wait for idle callback before forcing indexing |
 | `shouldDisplayDebugInformation` | `boolean` | `false` | Show debug information panel with tree statistics and enable console debug logging for tree operations and async search indexing |
@@ -542,7 +656,8 @@ Without both requirements, no search indexing will occur.
 | `onNodeClicked` | `(node) => void` | `undefined` | Node click event handler |
 | `onNodeDragStart` | `(node, event) => void` | `undefined` | Drag start event handler |
 | `onNodeDragOver` | `(node, event) => void` | `undefined` | Drag over event handler |
-| `onNodeDrop` | `(dropNode, draggedNode, event) => void` | `undefined` | Drop event handler |
+| `beforeDropCallback` | `(dropNode, draggedNode, position, event, operation) => boolean \| { position?, operation? } \| Promise<...>` | `undefined` | Async-capable callback to validate/modify drops before they happen |
+| `onNodeDrop` | `(dropNode, draggedNode, position, event, operation) => void` | `undefined` | Drop event handler. Position is 'above', 'below', or 'child'. Operation is 'move' or 'copy' |
 
 #### Visual Styling Properties
 | Prop | Type | Default | Description |
@@ -577,6 +692,12 @@ Without both requirements, no search indexing will occur.
 | `searchNodes` | `searchText: string \| null \| undefined, searchOptions?: SearchOptions` | Search nodes using internal search index and return matching nodes with optional FlexSearch options |
 | `scrollToPath` | `path: string, options?: ScrollToPathOptions` | Scroll to and highlight a specific node |
 | `update` | `updates: Partial<Props>` | Programmatically update component props from external JavaScript |
+| `addNode` | `parentPath: string, data: T, pathSegment?: string` | Add a new node under the specified parent |
+| `moveNode` | `sourcePath: string, targetPath: string, position: 'above' \| 'below' \| 'child'` | Move a node to a new location |
+| `removeNode` | `path: string, includeDescendants?: boolean` | Remove a node (and optionally its descendants) |
+| `getNodeByPath` | `path: string` | Get a node by its path |
+| `getChildren` | `parentPath: string` | Get direct children of a node |
+| `getSiblings` | `path: string` | Get siblings of a node (including itself) |
 
 #### ScrollToPath Options
 
@@ -742,8 +863,17 @@ Triggered when drag operation starts.
 #### onNodeDragOver(node, event)
 Triggered when dragging over a potential drop target.
 
-#### onNodeDrop(dropNode, draggedNode, event)
-Triggered when a node is dropped onto another node.
+#### beforeDropCallback(dropNode, draggedNode, position, event, operation)
+Called before a drop is processed. Can be async for showing dialogs.
+- Return `false` to cancel the drop
+- Return `{ position: 'above'|'below'|'child' }` to override position
+- Return `{ operation: 'move'|'copy' }` to override operation
+- Return `true` or `undefined` to proceed normally
+
+#### onNodeDrop(dropNode, draggedNode, position, event, operation)
+Triggered when a node is dropped. For same-tree moves, the tree auto-handles the move and this callback is for notification.
+- `position`: 'above', 'below', or 'child'
+- `operation`: 'move' or 'copy' (Ctrl+drag)
 
 ### Slots
 
@@ -917,15 +1047,34 @@ interface InsertArrayResult<T> {
 
 The component is optimized for large datasets:
 
+- **Flat Rendering Mode**: Single `{#each}` loop instead of recursive components (default, ~12x faster initial render)
+- **Progressive Rendering**: Batched rendering prevents UI freeze during initial load
+- **Context-Based Callbacks**: Stable function references eliminate unnecessary re-renders
 - **LTree**: Efficient hierarchical data structure
 - **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
+- **Accurate Search Results**: Search index only includes successfully inserted nodes
 - **Search Indexing**: Uses FlexSearch for fast search operations
 
-### v4.5 Performance Improvements
+### Performance Benchmarks (5500 nodes)
+
+| Operation | Time |
+|-----------|------|
+| Initial render | ~25ms |
+| Expand/collapse | ~100-150ms |
+| Search filtering | <50ms |
+
+### v4.5+ Performance Improvements
+
+**Flat Rendering Mode** (default) - Renders all visible nodes in a single loop:
+```svelte
+<Tree
+  {data}
+  useFlatRendering={true}
+  progressiveRender={true}
+/>
+```
 
-**Optimized `insertArray` algorithm** - Fixed O(n²) bottleneck that caused 85+ second load times with large datasets. Now loads 17,000+ nodes in under 100ms.
+**Optimized `insertArray` algorithm** - Fixed O(n²) bottleneck. Now loads 17,000+ nodes in under 100ms.
 
 **Performance Logging** - Built-in performance measurement for debugging:
 ```typescript

package/dist/components/Node.svelte

@@ -4,102 +4,73 @@
 	import {getContext, onDestroy, type Snippet} from "svelte"
 	import type {Ltree, DropPosition, DropOperation} from "../ltree/types.js"
 	import type {RenderCoordinator} from "./RenderCoordinator.svelte.js"
+	import type {NodeCallbacks, NodeConfig} from "./Tree.svelte"
 	import { uiLogger } from "../logger.js"
 
 	// Define component props interface
+	// Callbacks and config come from context, drag state comes as props
 	interface Props {
 		node: LTreeNode<T>;
 		children?: Snippet<[T]>; // Keep the general children slot for backward compatibility
-		onNodeClicked?: (node: LTreeNode<T>) => void;
-		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;
-		leafIconClass?: string | null | undefined;
-		selectedNodeClass?: string | null | undefined;
-		dragOverNodeClass?: string | null | undefined;
-		isDraggedNode?: boolean | null | undefined;
-
-		// Drag position indicators
+		// Drag state (passed as props for efficient Svelte diffing)
+		isDraggedNode?: boolean;
 		isDragInProgress?: boolean;
-		hoveredNodeForDropPath?: string | null; // Path of node being hovered for drop
+		hoveredNodeForDropPath?: string | null;
 		activeDropPosition?: DropPosition | null;
+		dropOperation?: DropOperation;
 
-		// 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)
+		// Flat rendering mode
+		flatMode?: boolean; // When true, don't render children (Tree handles flat rendering)
+		flatIndentSize?: string; // CSS value for per-level indentation in flat mode
 	}
 
 	// Destructure props using Svelte 5 syntax
 	let {
 		node,
 		children = undefined,
-		onNodeClicked,
-		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",
-		leafIconClass = "ltree-icon-leaf",
-		selectedNodeClass,
-		dragOverNodeClass,
+		// Drag state
 		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,
+
+		// Flat rendering mode
+		flatMode = false,
+		flatIndentSize = '1.5rem',
 	}: Props = $props()
 
+	// Get stable references from context (avoids prop drilling and re-renders from inline functions)
+	const callbacks = getContext<NodeCallbacks<T>>('NodeCallbacks');
+	const config = getContext<NodeConfig>('NodeConfig');
+
+	// Destructure config for convenience (these are stable references)
+	const {
+		shouldToggleOnNodeClick,
+		expandIconClass,
+		collapseIconClass,
+		leafIconClass,
+		selectedNodeClass,
+		dragOverNodeClass,
+		dropZoneMode,
+		dropZoneLayout,
+		dropZoneStart,
+		dropZoneMaxWidth,
+		allowCopy,
+	} = config;
+
 	// Compute if THIS node is the one being hovered for drop
-	const isHoveredForDrop = $derived(hoveredNodeForDropPath === node.path)
+	const isHoveredForDrop = $derived(hoveredNodeForDropPath === node.path);
 
 	// Format dropZoneStart - number = percentage, string = as-is
 	const formattedDropZoneStart = $derived(
@@ -139,32 +110,36 @@
 	}
 
 	// Convert reactive statements to derived values
-	const childrenArray = $derived(Object.values(node?.children || []))
-	const childrenWithData = $derived(Object.values(node?.children || []))
+	// In flat mode, children rendering is handled by Tree.svelte, so we skip these computations
+	const childrenArray = $derived(!flatMode ? Object.values(node?.children || []) : [])
 	const hasChildren = $derived(node?.hasChildren || false)
 	const indentStyle = $derived(
-		`margin-left: var(--tree-node-indent-per-level, 0.5rem)`,
+		flatMode
+			? `margin-left: calc(${(node?.level || 1) - 1} * ${flatIndentSize})`
+			: `margin-left: var(--tree-node-indent-per-level, 0.5rem)`,
 	)
 
-	// Progressive rendering state
+	// Progressive rendering state - only used in recursive mode
 	let renderedCount = $state(0);
 	let unregisterFromCoordinator: (() => void) | null = null;
 	let lastExpandedState = false;
 	let lastChildrenLength = 0;
 
-	// Get the children to render (all or progressive slice)
+	// Get the children to render (all or progressive slice) - only used in recursive mode
 	const childrenToRender = $derived(
-		progressiveRender && renderCoordinator
+		!flatMode && progressiveRender && renderCoordinator
 			? childrenArray.slice(0, renderedCount)
 			: childrenArray
 	);
 	const hasMoreToRender = $derived(
-		progressiveRender && renderCoordinator && renderedCount < childrenArray.length
+		!flatMode && progressiveRender && renderCoordinator && renderedCount < childrenArray.length
 	);
 
 	// Handle expansion state changes - use coordinator for progressive rendering
-	// Only react to isExpanded changes, not renderedCount changes
+	// Skip entirely in flat mode since Tree.svelte handles children rendering
 	$effect(() => {
+		if (flatMode) return; // Skip in flat mode - children handled by Tree
+
 		const isExpanded = node?.isExpanded ?? false;
 		const childCount = childrenArray.length;
 		const shouldRenderProgressively = progressiveRender && renderCoordinator && childCount > 0;
@@ -232,7 +207,7 @@
 
 	function _onNodeClicked() {
 		uiLogger.debug(`Node clicked: ${node.path}`, { id: node.id, hasChildren: node.hasChildren })
-		onNodeClicked?.(node)
+		callbacks.onNodeClicked(node)
 		if (shouldToggleOnNodeClick) {
 			toggleExpanded()
 		}
@@ -280,7 +255,7 @@
 			}}
 			oncontextmenu={(e) => {
 				e.stopPropagation();
-				onNodeRightClicked?.(node, e);
+				callbacks.onNodeRightClicked(node, e);
 			}}
 			ondragstart={(e) => {
 				if (node?.isDraggable && e.dataTransfer) {
@@ -289,7 +264,7 @@
 						"application/svelte-treeview",
 						JSON.stringify(node),
 					);
-					onNodeDragStart?.(node, e);
+					callbacks.onNodeDragStart(node, e);
 				}
 			}}
 			ondragover={(e) => {
@@ -305,7 +280,7 @@
 						glowPosition = calculateGlowPosition(e, e.currentTarget as HTMLElement);
 					}
 				}
-				onNodeDragOver?.(node, e);
+				callbacks.onNodeDragOver(node, e);
 			}}
 			ondragleave={(e) => {
 				const rect = e.currentTarget.getBoundingClientRect();
@@ -315,7 +290,7 @@
 				if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
 					isDraggedOver = false;
 					glowPosition = null;
-					onNodeDragLeave?.(node, e);
+					callbacks.onNodeDragLeave(node, e);
 				}
 			}}
 			ondrop={(e) => {
@@ -327,15 +302,15 @@
 				isDraggedOver = false;
 				// In glow mode, use the calculated glowPosition for the drop
 				if (dropZoneMode === 'glow' && glowPosition) {
-					onZoneDrop?.(node, glowPosition, e);
+					callbacks.onZoneDrop(node, glowPosition, e);
 				} else {
-					onNodeDrop?.(node, e);
+					callbacks.onNodeDrop(node, e);
 				}
 				glowPosition = null;
 			}}
-			ontouchstart={(e) => onTouchDragStart?.(node, e)}
-			ontouchmove={(e) => onTouchDragMove?.(node, e)}
-			ontouchend={(e) => onTouchDragEnd?.(node, e)}
+			ontouchstart={(e) => callbacks.onTouchDragStart(node, e)}
+			ontouchmove={(e) => callbacks.onTouchDragMove(node, e)}
+			ontouchend={(e) => callbacks.onTouchDragEnd(node, e)}
 		>
 			{#if children}
 				{@render children(node)}
@@ -354,62 +329,42 @@
 				<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); }}
+					ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'above'; callbacks.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); }}
+					ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.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); }}
+					ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'below'; callbacks.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); }}
+					ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.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); }}
+					ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'child'; callbacks.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); }}
+					ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'child', e); }}
 				>→ Child</div>
 			</div>
 		{/if}
 	</div>
 
-	{#if node?.isExpanded && node?.hasChildren}
+	<!-- In flat mode, children are rendered by Tree.svelte, not recursively here -->
+	{#if !flatMode && node?.isExpanded && node?.hasChildren}
 		<div class="ltree-children">
 			{#each childrenToRender as item (item.id)}
 				<Node
 					node={item}
 					{children}
-					{shouldToggleOnNodeClick}
-					{onNodeClicked}
-					{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}

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

@@ -6,34 +6,15 @@ declare function $$render<T>(): {
     props: {
         node: LTreeNode<T>;
         children?: Snippet<[T]>;
-        onNodeClicked?: (node: LTreeNode<T>) => void;
-        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;
+        isDraggedNode?: boolean;
         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;
+        flatMode?: boolean;
+        flatIndentSize?: string;
     };
     exports: {};
     bindings: "";