@keenmate/svelte-treeview 4.6.0 → 4.7.0

package/README.md

@@ -2,8 +2,54 @@
 
 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/
+## 📢 New in v4.7: Per-Node Drop Position Restrictions
+
+> [!NOTE]
+> **You can now restrict which drop positions (above/below/child) are allowed per node.**
+
+Use `getAllowedDropPositionsCallback` for dynamic logic or `allowedDropPositionsMember` for server data:
+```typescript
+// Files can only have siblings, trash only accepts children
+function getAllowedDropPositions(node) {
+  if (node.data?.type === 'file') return ['above', 'below'];
+  if (node.data?.type === 'trash') return ['child'];
+  return undefined; // all positions allowed (default)
+}
+```
+
+## 📢 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 (~20 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.
 
 ## 🚀 Features
 
@@ -83,40 +129,6 @@ 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
@@ -312,6 +324,45 @@ When using `dropZoneMode="floating"` (default), users can choose where to drop:
 - **Below**: Insert as sibling after the target node
 - **Child**: Insert as child of the target node
 
+#### Per-Node Drop Position Restrictions
+
+You can restrict which drop positions are allowed per node. This is useful for:
+- **Trash/Recycle Bin**: Only allow dropping INTO (child), not above/below
+- **Files**: Only allow above/below (can't drop INTO a file)
+- **Folders**: Allow all positions (default)
+
+```svelte
+<script lang="ts">
+  import { Tree, type DropPosition, type LTreeNode } from '@keenmate/svelte-treeview';
+
+  // Dynamic callback approach
+  function getAllowedDropPositions(node: LTreeNode<MyItem>): DropPosition[] | null {
+    if (node.data?.type === 'file') return ['above', 'below'];
+    if (node.data?.type === 'trash') return ['child'];
+    return undefined; // all positions allowed
+  }
+</script>
+
+<Tree
+  {data}
+  getAllowedDropPositionsCallback={getAllowedDropPositions}
+/>
+```
+
+Or use the member approach for server-side data:
+```svelte
+<Tree
+  {data}
+  allowedDropPositionsMember="allowedDropPositions"
+/>
+
+<!-- Where data items have: { allowedDropPositions: ['child'] } -->
+```
+
+When restrictions are applied:
+- **Glow mode**: Snaps to the nearest allowed position
+- **Floating mode**: Only renders buttons for allowed positions
+
 #### Async Drop Validation
 
 Use `beforeDropCallback` to validate or modify drops, including async operations like confirmation dialogs:
@@ -602,6 +653,7 @@ The component includes several pre-built classes for styling selected nodes:
 | `isSelectedMember` | `string \| null` | `null` | Property name for selected state |
 | `isDraggableMember` | `string \| null` | `null` | Property name for draggable state |
 | `isDropAllowedMember` | `string \| null` | `null` | Property name for drop allowed state |
+| `allowedDropPositionsMember` | `string \| null` | `null` | Property name for allowed drop positions array |
 | `hasChildrenMember` | `string \| null` | `null` | Property name for children existence |
 | `isSorted` | `boolean \| null` | `null` | Whether items should be sorted |
 
@@ -656,6 +708,7 @@ 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 |
+| `getAllowedDropPositionsCallback` | `(node) => DropPosition[] \| null` | `undefined` | Callback returning allowed drop positions per node |
 | `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' |
 

package/dist/components/Node.svelte

@@ -89,24 +89,63 @@
 	// Track glow position for glow mode
 	let glowPosition = $state<'above' | 'below' | 'child' | null>(null);
 
+	// Get allowed drop positions for this node (empty/undefined = all allowed)
+	// Uses tree.getNodeAllowedDropPositions which checks callback > member > node property
+	const allowedPositions = $derived(tree.getNodeAllowedDropPositions(node));
+
+	// Check if a position is allowed for this node
+	function isPositionAllowed(position: DropPosition): boolean {
+		if (!allowedPositions || allowedPositions.length === 0) {
+			return true; // All positions allowed by default
+		}
+		return allowedPositions.includes(position);
+	}
+
 	// Calculate glow position based on mouse position in the node row
-	function calculateGlowPosition(event: DragEvent, element: HTMLElement): 'above' | 'below' | 'child' {
+	// Respects allowedDropPositions - snaps to nearest allowed position
+	function calculateGlowPosition(event: DragEvent, element: HTMLElement): 'above' | 'below' | 'child' | null {
 		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
+		// Calculate the ideal position based on mouse position
+		let idealPosition: DropPosition;
 		if (x > width / 2) {
-			return 'child';
+			idealPosition = 'child';
+		} else if (y < height / 2) {
+			idealPosition = 'above';
+		} else {
+			idealPosition = 'below';
 		}
-		// Left half, top 50% = above
-		if (y < height / 2) {
-			return 'above';
+
+		// If no restrictions, return the ideal position
+		if (!allowedPositions || allowedPositions.length === 0) {
+			return idealPosition;
+		}
+
+		// If the ideal position is allowed, use it
+		if (allowedPositions.includes(idealPosition)) {
+			return idealPosition;
 		}
-		// Left half, bottom 50% = below
-		return 'below';
+
+		// Otherwise, snap to the nearest allowed position
+		// Priority: if only one position allowed, use that
+		if (allowedPositions.length === 1) {
+			return allowedPositions[0];
+		}
+
+		// Multiple positions allowed but not the ideal one
+		// For above/below: pick based on Y position
+		// For child: pick based on what's available
+		if (allowedPositions.includes('above') && allowedPositions.includes('below')) {
+			// Both above and below allowed, pick based on Y
+			return y < height / 2 ? 'above' : 'below';
+		}
+
+		// Return the first allowed position
+		return allowedPositions[0];
 	}
 
 	// Convert reactive statements to derived values
@@ -244,9 +283,9 @@
 			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-glow-above={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'above' && isPositionAllowed('above')}
+			class:ltree-glow-below={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'below' && isPositionAllowed('below')}
+			class:ltree-glow-child={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'child' && isPositionAllowed('child')}
 			class:ltree-drop-copy={isDragInProgress && isHoveredForDrop && dropOperation === 'copy'}
 			draggable={node?.isDraggable}
 			onclick={(e) => {
@@ -320,33 +359,39 @@
 		</div>
 
 		<!-- Drop zones: positioned relative to .ltree-node-row (outside content to avoid padding issues) -->
-		<!-- Only render floating drop zones when in 'floating' mode -->
+		<!-- Only render floating drop zones when in 'floating' mode, filtered by allowedDropPositions -->
 		{#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'; callbacks.onNodeDragOver(node, e); }}
-					ondragleave={() => { hoveredZone = null; }}
-					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'; callbacks.onNodeDragOver(node, e); }}
-					ondragleave={() => { hoveredZone = null; }}
-					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'; callbacks.onNodeDragOver(node, e); }}
-					ondragleave={() => { hoveredZone = null; }}
-					ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'child', e); }}
-				>→ Child</div>
+				{#if isPositionAllowed('above')}
+					<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'; callbacks.onNodeDragOver(node, e); }}
+						ondragleave={() => { hoveredZone = null; }}
+						ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'above', e); }}
+					>↑ Above</div>
+				{/if}
+				{#if isPositionAllowed('below')}
+					<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'; callbacks.onNodeDragOver(node, e); }}
+						ondragleave={() => { hoveredZone = null; }}
+						ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'below', e); }}
+					>↓ Below</div>
+				{/if}
+				{#if isPositionAllowed('child')}
+					<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'; callbacks.onNodeDragOver(node, e); }}
+						ondragleave={() => { hoveredZone = null; }}
+						ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'child', e); }}
+					>→ Child</div>
+				{/if}
 			</div>
 		{/if}
 	</div>

package/dist/components/Tree.svelte

@@ -94,6 +94,8 @@
 		isSelectedMember?: string | null | undefined;
 		isDraggableMember?: string | null | undefined;
 		isDropAllowedMember?: string | null | undefined;
+		allowedDropPositionsMember?: string | null | undefined;
+		getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
 		hasChildrenMember?: string | null | undefined;
 		isSorted?: boolean | null | undefined;
 
@@ -208,6 +210,8 @@
 		isSelectedMember,
 		isDraggableMember,
 		isDropAllowedMember,
+		allowedDropPositionsMember,
+		getAllowedDropPositionsCallback,
 
 		displayValueMember,
 		getDisplayValueCallback,
@@ -636,11 +640,13 @@
 		isSelectedMember,
 		isDraggableMember,
 		isDropAllowedMember,
+		allowedDropPositionsMember,
 
 		displayValueMember,
 		getDisplayValueCallback,
 		searchValueMember,
 		getSearchValueCallback,
+		getAllowedDropPositionsCallback,
 		orderMember,
 		treeId,
 		treePathSeparator,

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

@@ -13,6 +13,8 @@ declare function $$render<T>(): {
         isSelectedMember?: string | null | undefined;
         isDraggableMember?: string | null | undefined;
         isDropAllowedMember?: string | null | undefined;
+        allowedDropPositionsMember?: string | null | undefined;
+        getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
         hasChildrenMember?: string | null | undefined;
         isSorted?: boolean | null | undefined;
         displayValueMember?: string | null | undefined;
@@ -158,6 +160,8 @@ declare function $$render<T>(): {
             isSelectedMember?: string | null | undefined;
             isDraggableMember?: string | null | undefined;
             isDropAllowedMember?: string | null | undefined;
+            allowedDropPositionsMember?: string | null | undefined;
+            getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
             hasChildrenMember?: string | null | undefined;
             isSorted?: boolean | null | undefined;
             displayValueMember?: string | null | undefined;
@@ -313,6 +317,8 @@ declare class __sveltets_Render<T> {
             isSelectedMember?: string | null | undefined;
             isDraggableMember?: string | null | undefined;
             isDropAllowedMember?: string | null | undefined;
+            allowedDropPositionsMember?: string | null | undefined;
+            getAllowedDropPositionsCallback?: ((node: LTreeNode<T>) => DropPosition[] | null | undefined) | undefined;
             hasChildrenMember?: string | null | undefined;
             isSorted?: boolean | null | undefined;
             displayValueMember?: string | null | undefined;

package/dist/constants.generated.d.ts

@@ -1,4 +1,4 @@
-export declare const VERSION = "4.6.0";
+export declare const VERSION = "4.7.0";
 export declare const PACKAGE_NAME = "@keenmate/svelte-treeview";
 export declare const AUTHOR = "KeenMate";
 export declare const LICENSE = "MIT";

package/dist/constants.generated.js

@@ -1,6 +1,6 @@
 // Auto-generated file - do not edit manually
 // Generated by scripts/generate-constants.js
-export const VERSION = "4.6.0";
+export const VERSION = "4.7.0";
 export const PACKAGE_NAME = "@keenmate/svelte-treeview";
 export const AUTHOR = "KeenMate";
 export const LICENSE = "MIT";

package/dist/ltree/indexer.js

@@ -26,7 +26,8 @@ export class Indexer {
     }
     // Add items to the processing queue
     addToQueue(items) {
-        this.processingQueue.push(...items);
+        // Use concat instead of push(...items) to avoid stack overflow with large arrays
+        this.processingQueue = this.processingQueue.concat(items);
         this.totalItemsAdded += items.length;
         indexLogger.debug(`[${this.treeId}] Added ${items.length} items to queue. Queue size: ${this.processingQueue.length}`);
         // Start processing if not already running

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

@@ -1,4 +1,5 @@
 export type NodeId = string | number;
+export type DropPosition = 'above' | 'below' | 'child';
 export declare enum VisualState {
     indeterminate = "indeterminate",
     selected = "true",
@@ -18,6 +19,7 @@ export interface LTreeNode<T> {
     priority: number | null | undefined;
     isDraggable: boolean;
     isDropAllowed: boolean;
+    allowedDropPositions: DropPosition[] | null | undefined;
     isInsertAllowed: boolean;
     isNestAllowed: boolean;
     isCheckboxVisible: boolean | null | undefined;

package/dist/ltree/ltree-node.svelte.js

@@ -19,6 +19,7 @@ export function createLTreeNode(data) {
         priority: undefined,
         isDraggable: true,
         isDropAllowed: true,
+        allowedDropPositions: undefined,
         isInsertAllowed: true,
         isNestAllowed: true,
         isCheckboxVisible: false,

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, _orderMember?: string | null | undefined, _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>;
+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, _allowedDropPositionsMember?: string | null | undefined, _displayValueMember?: string | null | undefined, _getDisplayValueCallback?: (node: LTreeNode<T>) => string, _searchValueMember?: string | null | undefined, _getSearchValueCallback?: (node: LTreeNode<T>) => string, _getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => import('./types').DropPosition[] | null | undefined, _orderMember?: string | null | undefined, _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

@@ -5,7 +5,7 @@ import { getLevel, getParentPath, getPathSegments, getRelativePath } from '../he
 import { createSearchIndex } from './flex.js';
 import { Indexer } from './indexer.js';
 import { perfStart, perfEnd, perfSummary } from '../perf-logger.js';
-export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMember, _hasChildrenMember, _isExpandedMember, _isSelectableMember, _isDraggableMember, _isDropAllowedMember, _displayValueMember, _getDisplayValueCallback, _searchValueMember, _getSearchValueCallback, _orderMember, _treeId, _treePathSeparator, _expandLevel, _shouldUseInternalSearchIndex, _initializeIndexCallback, _indexerBatchSize, _indexerTimeout, opts) {
+export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMember, _hasChildrenMember, _isExpandedMember, _isSelectableMember, _isDraggableMember, _isDropAllowedMember, _allowedDropPositionsMember, _displayValueMember, _getDisplayValueCallback, _searchValueMember, _getSearchValueCallback, _getAllowedDropPositionsCallback, _orderMember, _treeId, _treePathSeparator, _expandLevel, _shouldUseInternalSearchIndex, _initializeIndexCallback, _indexerBatchSize, _indexerTimeout, opts) {
     let shouldCalculateParentPath = isEmptyString(_parentPathMember);
     let shouldCalculateLevel = isEmptyString(_levelMember);
     let shouldCalculateHasChildren = isEmptyString(_hasChildrenMember);
@@ -13,6 +13,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
     let shouldCalculateIsSelectable = isEmptyString(_isSelectableMember);
     let shouldCalculateIsDraggable = isEmptyString(_isDraggableMember);
     let shouldCalculateIsDropAllowed = isEmptyString(_isDropAllowedMember);
+    let shouldCalculateAllowedDropPositions = isEmptyString(_allowedDropPositionsMember);
     let shouldCalculateDisplayValue = isEmptyString(_displayValueMember);
     let shouldCalculateSearchValue = isEmptyString(_searchValueMember);
     // this is absolutely crucial to keep order of sorted items. Segments are just numbers and numbers as properties are always sorted
@@ -57,11 +58,13 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
         isSelectableMember: _isSelectableMember,
         isDraggableMember: _isDraggableMember,
         isDropAllowedMember: _isDropAllowedMember,
+        allowedDropPositionsMember: _allowedDropPositionsMember,
         hasChildrenMember: _hasChildrenMember,
         displayValueMember: _displayValueMember,
         getDisplayValueCallback: _getDisplayValueCallback,
         searchValueMember: _searchValueMember,
         getSearchValueCallback: _getSearchValueCallback,
+        getAllowedDropPositionsCallback: _getAllowedDropPositionsCallback,
         orderMember: _orderMember,
         isSorted: false,
         // Properties for filtering
@@ -171,6 +174,8 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     node.isDraggable = row[_isDraggableMember];
                 if (!shouldCalculateIsDropAllowed)
                     node.isDropAllowed = row[_isDropAllowedMember];
+                if (!shouldCalculateAllowedDropPositions)
+                    node.allowedDropPositions = row[_allowedDropPositionsMember];
                 if (!shouldCalculateHasChildren)
                     node.hasChildren = row[_hasChildrenMember];
                 node.data = row;
@@ -532,6 +537,16 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 return this.getSearchValueCallback(node);
             return '[N/A]';
         },
+        getNodeAllowedDropPositions(node) {
+            // Priority: callback > member > node property
+            if (this.getAllowedDropPositionsCallback) {
+                return this.getAllowedDropPositionsCallback(node);
+            }
+            if (!shouldCalculateAllowedDropPositions && node.data) {
+                return node.data[_allowedDropPositionsMember];
+            }
+            return node.allowedDropPositions;
+        },
         refresh() {
             this._emitTreeChanged();
         },

package/dist/ltree/types.d.ts

@@ -1,8 +1,7 @@
 import type { SearchOptions } from 'flexsearch';
-import type { LTreeNode } from './ltree-node.svelte';
-export type { LTreeNode } from './ltree-node.svelte';
+import type { LTreeNode, DropPosition } from './ltree-node.svelte';
+export type { LTreeNode, DropPosition } from './ltree-node.svelte';
 export type Tuple<T, U> = [T, U];
-export type DropPosition = 'above' | 'below' | 'child';
 export type DragDropMode = 'none' | 'self' | 'cross' | 'both';
 export type DropZoneLayout = 'around' | 'above' | 'below' | 'wave' | 'wave2';
 export type DropOperation = 'move' | 'copy';
@@ -69,7 +68,10 @@ export interface Ltree<T> {
     isSelectableMember: string | null | undefined;
     isDraggableMember: string | null | undefined;
     isDropAllowedMember: string | null | undefined;
+    allowedDropPositionsMember: string | null | undefined;
+    getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
     shouldDisplayDebugInformation: boolean | null | undefined;
+    getNodeAllowedDropPositions(node: LTreeNode<T>): DropPosition[] | null | undefined;
     get tree(): LTreeNode<T>[];
     /** Flat array of all visible nodes in render order (depth-first, respects isExpanded) */
     get visibleFlatNodes(): LTreeNode<T>[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.6.0",
+	"version": "4.7.0",
 	"scripts": {
 		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",