@keenmate/svelte-treeview 4.0.0-rc07 → 4.0.0

package/README.md

@@ -142,6 +142,71 @@ import '@keenmate/svelte-treeview/styles.scss';
 />
 ```
 
+### With Advanced Search Options
+
+```svelte
+<script lang="ts">
+  import { Tree } from '@keenmate/svelte-treeview';
+  import type { SearchOptions } from 'flexsearch';
+  
+  let treeRef;
+  const data = [/* your data */];
+  
+  // Programmatic search with FlexSearch options
+  function performAdvancedSearch(searchTerm: string) {
+    const searchOptions: SearchOptions = {
+      suggest: true,        // Enable suggestions for typos
+      limit: 10,            // Limit results to 10 items  
+      bool: "and"           // Use AND logic for multiple terms
+    };
+    
+    const results = treeRef.searchNodes(searchTerm, searchOptions);
+    console.log('Advanced search results:', results);
+  }
+  
+  // Programmatic filtering with options
+  function filterWithOptions(searchTerm: string) {
+    const searchOptions: SearchOptions = {
+      threshold: 0.8,       // Similarity threshold
+      depth: 2              // Search depth
+    };
+    
+    treeRef.filterNodes(searchTerm, searchOptions);
+  }
+</script>
+
+<Tree
+  bind:this={treeRef}
+  {data}
+  idMember="path"
+  pathMember="path"
+  shouldUseInternalSearchIndex={true}
+  searchValueMember="name"
+/>
+
+<button onclick={() => performAdvancedSearch('document')}>
+  Advanced Search
+</button>
+<button onclick={() => filterWithOptions('project')}>
+  Filter with Options
+</button>
+```
+
+#### FlexSearch Options Reference
+
+The `searchOptions` parameter accepts any options supported by FlexSearch. Common options include:
+
+| Option | Type | Description | Example |
+|--------|------|-------------|---------|
+| `suggest` | `boolean` | Enable suggestions for typos | `{ suggest: true }` |
+| `limit` | `number` | Maximum number of results | `{ limit: 10 }` |
+| `threshold` | `number` | Similarity threshold (0-1) | `{ threshold: 0.8 }` |
+| `depth` | `number` | Search depth for nested content | `{ depth: 2 }` |
+| `bool` | `string` | Boolean logic: "and", "or" | `{ bool: "and" }` |
+| `where` | `object` | Filter by field values | `{ where: { type: "folder" } }` |
+
+For complete FlexSearch documentation, visit: [FlexSearch Options](https://github.com/nextapps-de/flexsearch#options)
+
 ### With Drag & Drop
 
 ```svelte
@@ -183,6 +248,7 @@ import '@keenmate/svelte-treeview/styles.scss';
       data={targetData}
       idMember="path"
       pathMember="path"
+      dragOverNodeClass="ltree-dragover-highlight"
       onNodeDrop={onDrop}
     />
   </div>
@@ -199,7 +265,7 @@ The component uses CSS custom properties for easy theming:
 
 ```css
 :root {
-  --tree-node-indent-per-level: 0.5rem;
+  --tree-node-indent-per-level: 0.5rem;  /* Controls indentation for each hierarchy level */
   --ltree-primary: #0d6efd;
   --ltree-primary-rgb: 13, 110, 253;
   --ltree-success: #198754;
@@ -212,6 +278,8 @@ The component uses CSS custom properties for easy theming:
 }
 ```
 
+**Note**: The `--tree-node-indent-per-level` variable controls the consistent indentation applied at each hierarchy level. Each nested level receives this fixed indent amount, creating proper visual hierarchy without exponential indentation growth.
+
 ### SCSS Variables (if using SCSS)
 
 If you're building the styles from SCSS source, you can override these variables:
@@ -232,6 +300,7 @@ $primary-color: #custom-color;
 - `.ltree-node-content` - Node content area
 - `.ltree-toggle-icon` - Expand/collapse icons
 - `.ltree-selected-*` - Selected node styles
+- `.ltree-dragover-*` - Drag-over node styles
 - `.ltree-draggable` - Draggable nodes
 - `.ltree-context-menu` - Context menu styling
 - `.ltree-drag-over` - Applied during drag operations
@@ -258,6 +327,13 @@ The component includes several pre-built classes for styling selected nodes:
 | `ltree-selected-border` | Border and background highlight | Solid border with light background |
 | `ltree-selected-brackets` | Decorative brackets around text | ❯ **Node Text** ❮ |
 
+**Available Drag-over Node Classes:**
+
+| Class | Description | Visual Effect |
+|-------|-------------|---------------|
+| `ltree-dragover-highlight` | Dashed border with success color background | Green dashed border with subtle background |
+| `ltree-dragover-glow` | Blue glow effect | Glowing shadow effect with primary color theme |
+
 ### Custom Icon Classes
 
 ```svelte
@@ -323,7 +399,9 @@ Without both requirements, no search indexing will occur.
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `treeId` | `string \| null` | auto-generated | Unique identifier for the tree |
+| `treePathSeparator` | `string \| null` | `"."` | Separator character for hierarchical paths (e.g., "." for "1.2.3" or "/" for "1/2/3") |
 | `selectedNode` | `LTreeNode<T>` (bindable) | `undefined` | Currently selected node |
+| `insertResult` | `InsertArrayResult<T>` (bindable) | `undefined` | Result of the last data insertion including failed nodes |
 
 #### Behavior Properties
 | Prop | Type | Default | Description |
@@ -347,6 +425,7 @@ Without both requirements, no search indexing will occur.
 |------|------|---------|-------------|
 | `bodyClass` | `string \| null` | `undefined` | CSS class for tree body |
 | `selectedNodeClass` | `string \| null` | `undefined` | CSS class for selected nodes |
+| `dragOverNodeClass` | `string \| null` | `undefined` | CSS class for nodes being dragged over |
 | `expandIconClass` | `string \| null` | `"ltree-icon-expand"` | CSS class for expand icons |
 | `collapseIconClass` | `string \| null` | `"ltree-icon-collapse"` | CSS class for collapse icons |
 | `leafIconClass` | `string \| null` | `"ltree-icon-leaf"` | CSS class for leaf node icons |
@@ -370,6 +449,8 @@ Without both requirements, no search indexing will occur.
 | `collapseNodes` | `nodePath: string` | Collapse nodes at specified path |
 | `expandAll` | `nodePath?: string` | Expand all nodes or nodes under path |
 | `collapseAll` | `nodePath?: string` | Collapse all nodes or nodes under path |
+| `filterNodes` | `searchText: string, searchOptions?: SearchOptions` | Filter the tree display using internal search index with optional FlexSearch options |
+| `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 |
 
 #### ScrollToPath Options
@@ -541,12 +622,74 @@ interface NodeData {
 - Second level: `"1.1"`, `"1.2"`, `"2.1"`
 - Third level: `"1.1.1"`, `"1.2.1"`, `"2.1.1"`
 
+### Insert Result Information
+
+The tree provides detailed information about data insertion through the `insertResult` bindable property:
+
+```typescript
+interface InsertArrayResult<T> {
+  successful: number;     // Number of nodes successfully inserted
+  failed: Array<{        // Nodes that failed to insert
+    node: LTreeNode<T>;  // The processed tree node
+    originalData: T;     // The original data object
+    error: string;       // Error message (usually "Could not find parent...")
+  }>;
+  total: number;         // Total number of nodes processed
+}
+```
+
+#### Usage Example
+
+```svelte
+<script lang="ts">
+  import { Tree } from '@keenmate/svelte-treeview';
+  
+  let insertResult = $state();
+  
+  const data = [
+    { id: '1', path: '1', name: 'Root' },
+    { id: '1.2', path: '1.2', name: 'Child' },    // Missing parent "1.1"
+    { id: '1.1.1', path: '1.1.1', name: 'Deep' } // Missing parent "1.1"
+  ];
+  
+  // Check results after tree processes data
+  $effect(() => {
+    if (insertResult) {
+      console.log(`✅ ${insertResult.successful} nodes inserted successfully`);
+      console.log(`❌ ${insertResult.failed.length} nodes failed to insert`);
+      
+      insertResult.failed.forEach(failure => {
+        console.log(`Failed: ${failure.originalData.name} - ${failure.error}`);
+      });
+    }
+  });
+</script>
+
+<Tree 
+  {data} 
+  idMember="id" 
+  pathMember="path" 
+  displayValueMember="name"
+  bind:insertResult
+/>
+```
+
+#### Benefits
+
+- **Data Validation**: Identify missing parent nodes in hierarchical data
+- **Debugging**: Clear error messages with node paths like "Node: 1.1.1 - Could not find parent node: 1.1"
+- **Data Integrity**: Handle incomplete datasets gracefully
+- **Search Accuracy**: Failed nodes are excluded from search index, ensuring search results match visible tree
+- **User Feedback**: Inform users about data issues with detailed failure information
+
 ## 🚀 Performance
 
 The component is optimized for large datasets:
 
 - **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
 - **Virtual Scrolling**: (Coming soon)
 - **Lazy Loading**: (Coming soon)
 - **Search Indexing**: Uses FlexSearch for fast search operations

package/dist/components/Node.svelte

@@ -22,13 +22,14 @@
 		collapseIconClass?: string | null | undefined;
 		leafIconClass?: string | null | undefined;
 		selectedNodeClass?: string | null | undefined;
+		dragOverNodeClass?: string | null | undefined;
 		isDraggedNode?: boolean | null | undefined;
 	}
 
 	// Destructure props using Svelte 5 syntax
 	let {
 		node,
-		children,
+		children = undefined,
 		onNodeClicked,
 		onNodeRightClicked,
 		onNodeDragStart,
@@ -43,16 +44,20 @@
 		collapseIconClass = "ltree-icon-collapse",
 		leafIconClass = "ltree-icon-leaf",
 		selectedNodeClass,
+		dragOverNodeClass,
 		isDraggedNode = false,
 	}: Props = $props()
 
 	const trie = getContext<Ltree<T>>("Ltree")
 
+	// Drag over state
+	let isDraggedOver = $state(false);
+
 	// Convert reactive statements to derived values
 	const childrenWithData = $derived(Object.values(node?.children || []))
 	const hasChildren = $derived(node?.hasChildren || false)
 	const indentStyle = $derived(
-		`margin-left: calc(${node?.level || 0} * var(--tree-node-indent-per-level, 0.5rem))`,
+		`margin-left: var(--tree-node-indent-per-level, 0.5rem)`,
 	)
 
 	function toggleExpanded() {
@@ -71,9 +76,9 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div 
-	class="ltree-node" 
-	id="{node.treeId}-{node.id}" 
+<div
+	class="ltree-node"
+	id="{node.treeId}-{node.id}"
 	data-tree-path="{node.path}"
 	style={indentStyle}
 >
@@ -96,7 +101,7 @@
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="ltree-node-content {node.isSelected ? selectedNodeClass : ''}"
+			class="ltree-node-content {node.isSelected ? selectedNodeClass : ''} {isDraggedOver && dragOverNodeClass ? dragOverNodeClass : ''}"
 			class:ltree-clickable={node.isSelectable}
 			class:ltree-dragged={isDraggedNode}
 			class:ltree-draggable={node?.isDraggable}
@@ -125,12 +130,25 @@
 				}
 			}}
 			ondragover={(e) => {
-				if (e.dataTransfer?.types.includes("application/svelte-treeview"))
+				if (e.dataTransfer?.types.includes("application/svelte-treeview")) {
 					e.preventDefault();
+					isDraggedOver = true;
+				}
 				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;
+				}
+			}}
 			ondrop={(e) => {
 				e.stopPropagation();
+				isDraggedOver = false;
 				onNodeDrop?.(node, e);
 			}}
 		>
@@ -158,6 +176,7 @@
 					{collapseIconClass}
 					{leafIconClass}
 					{selectedNodeClass}
+					{dragOverNodeClass}
 					{isDraggedNode}
 				/>
 			{/each}

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

@@ -15,6 +15,7 @@ declare function $$render<T>(): {
         collapseIconClass?: string | null | undefined;
         leafIconClass?: string | null | undefined;
         selectedNodeClass?: string | null | undefined;
+        dragOverNodeClass?: string | null | undefined;
         isDraggedNode?: boolean | null | undefined;
     };
     exports: {};

package/dist/components/Tree.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T">
-	import type { Index } from 'flexsearch';
+	import type { Index, SearchOptions } from 'flexsearch';
 	import Node from './Node.svelte';
 	import { type LTreeNode } from '../ltree/ltree-node.svelte.js';
 	import { createLTree } from '../ltree/ltree.svelte.js';
-	import { type Ltree } from '../ltree/types.js';
+	import { type Ltree, type InsertArrayResult } from '../ltree/types.js';
 	import { setContext, tick } from 'svelte';
 
 	// Context menu state
@@ -37,11 +37,13 @@
 		getSearchValueCallback?: (node: LTreeNode<T>) => string;
 
 		treeId?: string | null | undefined;
+		treePathSeparator?: string | null | undefined;
 		sortCallback?: (items: LTreeNode<T>[]) => LTreeNode<T>[];
 
 		// DATA
 		data: T[];
 		selectedNode?: LTreeNode<T> | null | undefined;
+		insertResult?: InsertArrayResult<T> | null | undefined;
 
 		// SLOTS
 		nodeTemplate?: any;
@@ -70,6 +72,7 @@
 		// VISUALS
 		bodyClass?: string | null | undefined;
 		selectedNodeClass?: string | null | undefined;
+		dragOverNodeClass?: string | null | undefined;
 		expandIconClass?: string | null | undefined;
 		collapseIconClass?: string | null | undefined;
 		leafIconClass?: string | null | undefined;
@@ -79,6 +82,7 @@
 
 	let {
 		treeId,
+		treePathSeparator,
 
 		// MAPPINGS
 		idMember,
@@ -102,13 +106,14 @@
 		// DATA
 		data = $bindable(),
 		selectedNode = $bindable(),
+		insertResult = $bindable(),
 
 		// SLOTS
-		nodeTemplate,
-		treeHeader,
-		treeFooter,
-		noDataFound,
-		contextMenu,
+		nodeTemplate = undefined,
+		treeHeader = undefined,
+		treeFooter = undefined,
+		noDataFound = undefined,
+		contextMenu = undefined,
 
 		// BEHAVIOUR
 		expandLevel = 2,
@@ -133,21 +138,13 @@
 		collapseIconClass = 'ltree-icon-collapse',
 		leafIconClass = 'ltree-icon-leaf',
 		selectedNodeClass,
+		dragOverNodeClass,
 		scrollHighlightTimeout = 4000,
 		scrollHighlightClass = 'ltree-scroll-highlight'
 	}: Props = $props();
 
 	export async function expandNodes(nodePath: string) {
 		tree.expandNodes(nodePath);
-
-		// trie.dummyText = Date.now().toLocaleString();
-		// console.log(trie.dummyText);
-		// rootNodes.forEach((element) => {
-		//   if (element.path === nodePath) {
-		//     element.isExpanded = !element.isExpanded;
-		//     console.log(element)
-		//   }
-		// });
 	}
 
 	export async function collapseNodes(nodePath: string) {
@@ -162,6 +159,17 @@
 		tree?.collapseAll(nodePath);
 	}
 
+	export function filterNodes(searchText: string, searchOptions?: SearchOptions): void {
+		tree?.filterNodes(searchText, searchOptions);
+	}
+
+	export function searchNodes(
+		searchText: string | null | undefined,
+		searchOptions?: SearchOptions
+	): LTreeNode<T>[] {
+		return tree?.searchNodes(searchText, searchOptions) || [];
+	}
+
 	export async function scrollToPath(
 		path: string,
 		options?: { expand?: boolean; highlight?: boolean; scrollOptions?: ScrollIntoViewOptions }
@@ -204,17 +212,7 @@
 		// Highlight the node temporarily if requested
 		if (highlight && scrollHighlightClass) {
 			contentDiv.classList.add(scrollHighlightClass);
-			console.log(
-				'🚀 elementId ~ scrollToPath ~ adding scrollHighlightClass:',
-				elementId,
-				scrollHighlightClass
-			);
 			setTimeout(() => {
-				console.log(
-					'🚀 elementId ~ scrollToPath ~ removing scrollHighlightClass:',
-					elementId,
-					scrollHighlightClass
-				);
 				contentDiv.classList.remove(scrollHighlightClass);
 			}, scrollHighlightTimeout);
 		}
@@ -244,6 +242,7 @@
 		searchValueMember,
 		getSearchValueCallback,
 		treeId,
+		treePathSeparator,
 
 		expandLevel,
 
@@ -265,7 +264,9 @@
 	});
 
 	$effect(() => {
-		tree?.insertArray(data);
+		if (tree && data) {
+			insertResult = tree.insertArray(data);
+		}
 	});
 
 	// $inspect("trie change tracker", trie?.changeTracker?.toString());
@@ -428,9 +429,7 @@
 		</div>
 	{/if}
 
-	{#if treeHeader}
-		{@render treeHeader?.()}
-	{/if}
+	{@render treeHeader?.()}
 	<div class:bodyClass>
 		{#if tree?.root}
 			{#key tree.changeTracker}
@@ -449,6 +448,7 @@
 							{collapseIconClass}
 							{leafIconClass}
 							{selectedNodeClass}
+							{dragOverNodeClass}
 							isDraggedNode={draggedNode === node}
 						/>
 					{:else}
@@ -464,9 +464,8 @@
 			</div>
 		{/if}
 	</div>
-	{#if treeFooter}
+	
 		{@render treeFooter?.()}
-	{/if}
 
 	<!-- Context Menu -->
 	{#if contextMenuVisible && contextMenu && contextMenuNode}

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

@@ -1,5 +1,6 @@
-import type { Index } from 'flexsearch';
+import type { Index, SearchOptions } from 'flexsearch';
 import { type LTreeNode } from '../ltree/ltree-node.svelte.js';
+import { type InsertArrayResult } from '../ltree/types.js';
 declare function $$render<T>(): {
     props: {
         trieId?: string | null | undefined;
@@ -18,9 +19,11 @@ declare function $$render<T>(): {
         searchValueMember?: string | null | undefined;
         getSearchValueCallback?: (node: LTreeNode<T>) => string;
         treeId?: string | null | undefined;
+        treePathSeparator?: string | null | undefined;
         sortCallback?: (items: LTreeNode<T>[]) => LTreeNode<T>[];
         data: T[];
         selectedNode?: LTreeNode<T> | null | undefined;
+        insertResult?: InsertArrayResult<T> | null | undefined;
         nodeTemplate?: any;
         treeHeader?: any;
         treeBody?: any;
@@ -41,6 +44,7 @@ declare function $$render<T>(): {
         onNodeDrop?: (node: LTreeNode<T>, draggedNode: LTreeNode<T>, event: DragEvent) => void;
         bodyClass?: string | null | undefined;
         selectedNodeClass?: string | null | undefined;
+        dragOverNodeClass?: string | null | undefined;
         expandIconClass?: string | null | undefined;
         collapseIconClass?: string | null | undefined;
         leafIconClass?: string | null | undefined;
@@ -52,13 +56,15 @@ declare function $$render<T>(): {
         collapseNodes: (nodePath: string) => Promise<void>;
         expandAll: (nodePath?: string | null | undefined) => void;
         collapseAll: (nodePath?: string | null | undefined) => void;
+        filterNodes: (searchText: string, searchOptions?: SearchOptions) => void;
+        searchNodes: (searchText: string | null | undefined, searchOptions?: SearchOptions) => LTreeNode<T>[];
         scrollToPath: (path: string, options?: {
             expand?: boolean;
             highlight?: boolean;
             scrollOptions?: ScrollIntoViewOptions;
         }) => Promise<boolean>;
     };
-    bindings: "data" | "selectedNode" | "searchText";
+    bindings: "data" | "selectedNode" | "insertResult" | "searchText";
     slots: {};
     events: {};
 };
@@ -66,12 +72,14 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "data" | "selectedNode" | "searchText";
+    bindings(): "data" | "selectedNode" | "insertResult" | "searchText";
     exports(): {
         expandNodes: (nodePath: string) => Promise<void>;
         collapseNodes: (nodePath: string) => Promise<void>;
         expandAll: (nodePath?: string | null | undefined) => void;
         collapseAll: (nodePath?: string | null | undefined) => void;
+        filterNodes: (searchText: string, searchOptions?: SearchOptions) => void;
+        searchNodes: (searchText: string | null | undefined, searchOptions?: SearchOptions) => LTreeNode<T>[];
         scrollToPath: (path: string, options?: {
             expand?: boolean;
             highlight?: boolean;

package/dist/ltree/ltree-demo.js

@@ -78,7 +78,7 @@ export function performanceTest() {
     console.time('Prefix search for "1."');
     const results = trie.findByPrefix('1.');
     console.timeEnd('Prefix search for "1."');
-    console.log(`Found ${results.length} paths with prefix "1."`);
+    console.log(`Found ${results?.length} paths with prefix "1."`);
     // Memory usage
     const stats = trie.getStats();
     console.log('Final statistics:', stats);

package/dist/ltree/ltree.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Index } from 'flexsearch';
 import { type LTreeNode } from './ltree-node.svelte';
 import type { Ltree } from './types.js';
-export declare function createLTree<T>(_idMember: string, _pathMember: string, _parentPathMember?: string | null | undefined, _levelMember?: string | null | undefined, _hasChildrenMember?: string | null | undefined, _isExpandedMember?: string | null | undefined, _isSelectableMember?: string | null | undefined, _isDraggableMember?: string | null | undefined, _isDropAllowedMember?: string | null | undefined, _displayValueMember?: string | null | undefined, _getDisplayValueCallback?: (node: LTreeNode<T>) => string, _searchValueMember?: string | null | undefined, _getSearchValueCallback?: (node: LTreeNode<T>) => string, _treeId?: string, _expandLevel?: number | null | undefined, _shouldUseInternalSearchIndex?: boolean | null | undefined, _initializeIndexCallback?: () => Index, _indexerBatchSize?: number | null | undefined, _indexerTimeout?: number | null | undefined, opts?: Partial<Ltree<T>>): Ltree<T>;
+export declare function createLTree<T>(_idMember: string, _pathMember: string, _parentPathMember?: string | null | undefined, _levelMember?: string | null | undefined, _hasChildrenMember?: string | null | undefined, _isExpandedMember?: string | null | undefined, _isSelectableMember?: string | null | undefined, _isDraggableMember?: string | null | undefined, _isDropAllowedMember?: string | null | undefined, _displayValueMember?: string | null | undefined, _getDisplayValueCallback?: (node: LTreeNode<T>) => string, _searchValueMember?: string | null | undefined, _getSearchValueCallback?: (node: LTreeNode<T>) => string, _treeId?: string, _treePathSeparator?: string | null | undefined, _expandLevel?: number | null | undefined, _shouldUseInternalSearchIndex?: boolean | null | undefined, _initializeIndexCallback?: () => Index, _indexerBatchSize?: number | null | undefined, _indexerTimeout?: number | null | undefined, opts?: Partial<Ltree<T>>): Ltree<T>;

package/dist/ltree/ltree.svelte.js

@@ -4,7 +4,7 @@ import { isEmptyString } from '../helpers/string-helpers.js';
 import { getLevel, getParentPath, getPathSegments, getRelativePath } from '../helpers/ltree-helpers.js';
 import { createSearchIndex } from './flex.js';
 import { Indexer } from './indexer.js';
-export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMember, _hasChildrenMember, _isExpandedMember, _isSelectableMember, _isDraggableMember, _isDropAllowedMember, _displayValueMember, _getDisplayValueCallback, _searchValueMember, _getSearchValueCallback, _treeId, _expandLevel, _shouldUseInternalSearchIndex, _initializeIndexCallback, _indexerBatchSize, _indexerTimeout, opts) {
+export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMember, _hasChildrenMember, _isExpandedMember, _isSelectableMember, _isDraggableMember, _isDropAllowedMember, _displayValueMember, _getDisplayValueCallback, _searchValueMember, _getSearchValueCallback, _treeId, _treePathSeparator, _expandLevel, _shouldUseInternalSearchIndex, _initializeIndexCallback, _indexerBatchSize, _indexerTimeout, opts) {
     let shouldCalculateParentPath = isEmptyString(_parentPathMember);
     let shouldCalculateLevel = isEmptyString(_levelMember);
     let shouldCalculateHasChildren = isEmptyString(_hasChildrenMember);
@@ -40,7 +40,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
     }
     return {
         // Properties
-        treePathSeparator: '.',
+        treePathSeparator: _treePathSeparator || '.',
         root,
         get changeTracker() {
             return changeTracker;
@@ -87,6 +87,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             data = data || [];
             // Clear any pending indexing from previous calls
             indexer?.clearQueue();
+            flatTreeNodes = [];
             performance.mark('conversion-start');
             let mappedData = data.map((row, index) => {
                 const node = createLTreeNode();
@@ -132,22 +133,34 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 console.log(`[Tree ${_treeId}] Mapped data after sort`, mappedData);
             performance.mark('sort-end');
             performance.mark('insert-start');
-            const errors = [];
+            const failedNodes = [];
             const itemsToIndex = [];
+            let realIndex = 0; // this is used to avoid scenario, when node cannot found a parent
+            let successfulCount = 0;
             mappedData.forEach((node, index) => {
                 const result = this.insertTreeNode(node.parentPath, node, true);
                 if (result) {
-                    errors.push(result);
+                    failedNodes.push({
+                        node: node,
+                        originalData: data[index],
+                        error: result
+                    });
                 }
                 else {
+                    successfulCount++;
                     // Collect items for batch indexing
                     if (_shouldUseInternalSearchIndex && indexer) {
-                        itemsToIndex.push({ node, index });
+                        flatTreeNodes.push(node);
+                        itemsToIndex.push({ node, index: realIndex });
+                        realIndex++;
                     }
                 }
             });
-            if (errors.length > 0)
-                console.warn(`[Tree ${_treeId}]`, errors);
+            // Log errors for backward compatibility and debugging
+            if (failedNodes.length > 0) {
+                const errorMessages = failedNodes.map((f) => f.error);
+                console.warn(`[Tree ${_treeId}] ${failedNodes.length} nodes failed to insert:`, errorMessages);
+            }
             // Batch add items to indexer
             if (itemsToIndex.length > 0 && indexer) {
                 indexer.setCallbacks(undefined, // no progress callback for now
@@ -172,11 +185,16 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             console.log(`[Tree ${_treeId}] Conversion took: ${measure.duration}ms`);
             measure = performance.getEntriesByName('insert-duration')[0];
             console.log(`[Tree ${_treeId}] Insert took: ${measure.duration}ms`);
+            return {
+                successful: successfulCount,
+                failed: failedNodes,
+                total: data.length
+            };
         },
         insertTreeNode: function (parentPath, newNode, noEmitChanges) {
             const parentNode = this.getNodeByPath(parentPath);
             if (!parentNode) {
-                return `Could not find node for parent path: ${parentPath}`;
+                return `Node: ${newNode.path} - Could not find parent node: ${parentPath}`;
             }
             if (shouldCalculateLevel) {
                 newNode.level = (parentNode.level || 0) + 1;
@@ -191,13 +209,12 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 nodeCount++;
                 maxLevel = Math.max(maxLevel, newNode.level || 0);
             }
-            flatTreeNodes.push(newNode);
             if (!noEmitChanges) {
                 this._emitTreeChanged();
             }
             return null;
         },
-        filterNodes(_searchText) {
+        filterNodes(_searchText, _searchOptions) {
             if (this.shouldDisplayDebugInformation)
                 console.log(`[Tree ${_treeId}] Filtering nodes by:`, _searchText);
             if (isEmptyString(_searchText)) {
@@ -214,10 +231,29 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     console.warn(`[Tree ${_treeId}] Internal search index is disabled`);
                 return;
             }
-            const resultIndices = searchIndex.search(_searchText);
+            const resultIndices = searchIndex.search(_searchText, _searchOptions);
             const foundPaths = resultIndices.map((row) => flatTreeNodes[row].path);
+            if (this.shouldDisplayDebugInformation)
+                console.warn(`[Tree ${_treeId}] Found indices:`, resultIndices, foundPaths);
             this.createFilteredTree(foundPaths);
         },
+        searchNodes(_searchText, _searchOptions) {
+            if (this.shouldDisplayDebugInformation)
+                console.log(`[Tree ${_treeId}] Searching nodes by:`, _searchText);
+            if (isEmptyString(_searchText)) {
+                return [];
+            }
+            if (!_shouldUseInternalSearchIndex) {
+                if (this.shouldDisplayDebugInformation)
+                    console.warn(`[Tree ${_treeId}] Internal search index is disabled`);
+                return [];
+            }
+            const resultIndices = searchIndex.search(_searchText, _searchOptions);
+            const foundNodes = resultIndices.map((row) => flatTreeNodes[row]);
+            if (this.shouldDisplayDebugInformation)
+                console.warn(`[Tree ${_treeId}] Found indices:`, resultIndices, foundNodes);
+            return foundNodes;
+        },
         createFilteredTree(targetPaths) {
             filteredRoot.children = {};
             filteredTree = null;

package/dist/ltree/types.d.ts

@@ -1,5 +1,15 @@
+import type { SearchOptions } from 'flexsearch';
 import type { LTreeNode } from './ltree-node.svelte';
 export type Tuple<T, U> = [T, U];
+export interface InsertArrayResult<T> {
+    successful: number;
+    failed: Array<{
+        node: LTreeNode<T>;
+        originalData: T;
+        error: string;
+    }>;
+    total: number;
+}
 export interface Ltree<T> {
     treePathSeparator: string;
     root: LTreeNode<T>;
@@ -29,9 +39,10 @@ export interface Ltree<T> {
         nodeCount: number;
         maxLevel: number;
     };
-    insertArray(data: T[]): void;
+    insertArray(data: T[]): InsertArrayResult<T>;
     insertTreeNode(parentPath: string, newNode: LTreeNode<T>, noEmitChanges?: boolean): string | null;
-    filterNodes(_searchText: string): void;
+    filterNodes(_searchText: string, _searchOptions?: SearchOptions): void;
+    searchNodes(_searchText: string | null | undefined, _searchOptions?: SearchOptions): LTreeNode<T>[];
     createFilteredTree(targetPaths: string[]): void;
     clearFilter(): void;
     expandAll(nodePath?: string | null | undefined): void;

package/dist/styles/main.scss

@@ -190,6 +190,35 @@ $body-color: #212529 !default;
 	}
 }
 
+// Drag-over Node Styles
+.ltree-dragover-highlight {
+	background-color: rgba(var(--ltree-success-rgb), 0.15) !important;
+	border: 2px dashed var(--ltree-success) !important;
+	border-radius: 4px !important;
+}
+
+.ltree-dragover-glow {
+	background-color: rgba(var(--ltree-primary-rgb), 0.1) !important;
+	box-shadow: 0 0 8px rgba(var(--ltree-primary-rgb), 0.4) !important;
+	border-radius: 4px !important;
+}
+
+@keyframes bounce {
+	0%,
+	20%,
+	50%,
+	80%,
+	100% {
+		transform: translateY(-50%);
+	}
+	40% {
+		transform: translateY(-60%);
+	}
+	60% {
+		transform: translateY(-40%);
+	}
+}
+
 // Drag and Drop Styles
 .ltree-draggable {
 	cursor: grab;
@@ -339,12 +368,24 @@ $body-color: #212529 !default;
 
 .ltree-scroll-highlight-arrow {
 	position: relative;
+	&::before {
+		content: '⇨'; /* arrow pointing right */
+		position: absolute;
+		left: -1.2em; /* place outside row */
+		top: 50%; /* vertical center */
+		transform: translateY(-57%);
+		font-size: 3em;
+		pointer-events: none; /* arrow doesn’t block hover */
+		color: var(--ltree-danger);
+
+		z-index: 1;
+	}
 	&::after {
 		content: '⇦'; /* arrow pointing right */
 		position: absolute;
 		right: 0em; /* place outside row */
 		top: 50%; /* vertical center */
-		transform: translateY(-50%);
+		transform: translateY(-57%);
 		font-size: 3em;
 		pointer-events: none; /* arrow doesn’t block hover */
 		color: var(--ltree-danger);

package/dist/styles.css

@@ -138,6 +138,29 @@
   font-weight: bold;
 }
 
+.ltree-dragover-highlight {
+  background-color: rgba(var(--ltree-success-rgb), 0.15) !important;
+  border: 2px dashed var(--ltree-success) !important;
+  border-radius: 4px !important;
+}
+
+.ltree-dragover-glow {
+  background-color: rgba(var(--ltree-primary-rgb), 0.1) !important;
+  box-shadow: 0 0 8px rgba(var(--ltree-primary-rgb), 0.4) !important;
+  border-radius: 4px !important;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(-50%);
+  }
+  40% {
+    transform: translateY(-60%);
+  }
+  60% {
+    transform: translateY(-40%);
+  }
+}
 .ltree-draggable {
   cursor: grab;
 }
@@ -263,12 +286,23 @@
 .ltree-scroll-highlight-arrow {
   position: relative;
 }
+.ltree-scroll-highlight-arrow::before {
+  content: "⇨"; /* arrow pointing right */
+  position: absolute;
+  left: -1.2em; /* place outside row */
+  top: 50%; /* vertical center */
+  transform: translateY(-57%);
+  font-size: 3em;
+  pointer-events: none; /* arrow doesn’t block hover */
+  color: var(--ltree-danger);
+  z-index: 1;
+}
 .ltree-scroll-highlight-arrow::after {
   content: "⇦"; /* arrow pointing right */
   position: absolute;
   right: 0em; /* place outside row */
   top: 50%; /* vertical center */
-  transform: translateY(-50%);
+  transform: translateY(-57%);
   font-size: 3em;
   pointer-events: none; /* arrow doesn’t block hover */
   color: var(--ltree-danger);

package/dist/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/lib/styles/main.scss"],"names":[],"mappings":";AAmCA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAID;EACC,aA5CA;;AA+CA;EACC;EACA,OAlCqB;EAmCrB;EACA;;;AAIF;EACC,aAxDA;EAyDA,WAvDqB;;AAyDrB;EACC;EACA;;AAGD;EACC;EACA;EACA,SAhE0B;EAiE1B,eAhEgC;EAiEhC;EACA;EACA;;AAEA;EACC,kBArEkB;;AAyEpB;EACC;;AAGD;EACC,OA7EuB;EA8EvB;EACA;EACA,cA7E8B;EA8E9B,WAhF2B;EAiF3B,OAhFuB;EAiFvB;EACA;;AAEA;EACC;;AAIF;EACC,cAxF4B;EAyF5B,WAxFyB;;AA2F1B;EACC,aA3F4B;EA4F5B,cA3F6B;;AA8F9B;EACC,WA9FyB;EA+FzB,OA9FqB;;AAiGtB;EACC,YAjGyB;;;AAsG3B;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;;AAKF;EACC;;AAEA;EACC;;;AAIF;EACC;EACA;EACA,YACC;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;;AAKF;EACC,aA3RA;EA4RA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMH;EACC;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAKF;EAEC;EACA;EACA;EAGA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../src/lib/styles/main.scss"],"names":[],"mappings":";AAmCA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAID;EACC,aA5CA;;AA+CA;EACC;EACA,OAlCqB;EAmCrB;EACA;;;AAIF;EACC,aAxDA;EAyDA,WAvDqB;;AAyDrB;EACC;EACA;;AAGD;EACC;EACA;EACA,SAhE0B;EAiE1B,eAhEgC;EAiEhC;EACA;EACA;;AAEA;EACC,kBArEkB;;AAyEpB;EACC;;AAGD;EACC,OA7EuB;EA8EvB;EACA;EACA,cA7E8B;EA8E9B,WAhF2B;EAiF3B,OAhFuB;EAiFvB;EACA;;AAEA;EACC;;AAIF;EACC,cAxF4B;EAyF5B,WAxFyB;;AA2F1B;EACC,aA3F4B;EA4F5B,cA3F6B;;AA8F9B;EACC,WA9FyB;EA+FzB,OA9FqB;;AAiGtB;EACC,YAjGyB;;;AAsG3B;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;;AAKF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;IAKC;;EAED;IACC;;EAED;IACC;;;AAKF;EACC;;AAEA;EACC;;;AAIF;EACC;EACA;EACA,YACC;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;;AAKF;EACC,aAxTA;EAyTA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMH;EACC;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAKF;EAEC;EACA;EACA;EAGA","file":"styles.css"}

package/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.0.0-rc07",
+	"version": "4.0.0",
 	"scripts": {
-		"dev": "vite dev --port 7777",
+		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",
+		"build:showcase": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && sass src/lib/styles.scss dist/styles.css && publint",
@@ -40,10 +41,11 @@
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/kit": "^2.22.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@types/flexsearch": "^0.7.6",
+		"@types/flexsearch": "^0.7.42",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
@@ -60,7 +62,7 @@
 		"vite": "^7.0.4"
 	},
 	"optionalDependencies": {
-		"flexsearch": "^0.8.205"
+		"flexsearch": "^0.8.212"
 	},
 	"keywords": [
 		"svelte",