@keenmate/svelte-treeview 4.6.0 → 4.8.0

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
@@ -42,6 +43,27 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
         _indexerTimeout || 50, // timeout with fallback
         opts.shouldDisplayDebugInformation);
     }
+    // Per-node reactive signals for O(1) fine-grained updates.
+    // Each NodeSignal is an independent $state — bumping one only notifies
+    // the single Node component that reads it. Stored in a plain Map
+    // (not $state) to avoid proxy overhead.
+    class NodeSignal {
+        value = $state(0);
+        bump() { this.value++; }
+    }
+    let nodeSignals = new Map();
+    function _bumpRev(node) {
+        node._rev = (node._rev || 0) + 1;
+    }
+    function _bumpNodeRev(node) {
+        // Signal only — do NOT bump _rev. _rev is part of the {#each} key,
+        // so bumping it would cause {#each} to detect a key change and
+        // destroy/recreate the component (O(n) diffing). We only want the
+        // per-node signal to fire, which is O(1).
+        const signal = nodeSignals.get(String(node.id));
+        if (signal)
+            signal.bump();
+    }
     return {
         // Properties
         treePathSeparator: _treePathSeparator || '.',
@@ -57,13 +79,15 @@ 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,
+        isSorted: opts?.isSorted ?? false,
         // Properties for filtering
         filteredTree,
         isFiltered,
@@ -104,11 +128,8 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             const result = [];
             const self = this;
             function traverse(node) {
-                // Get children and optionally sort them
-                let children = Object.values(node.children);
-                if (self.isSorted && children.length > 0) {
-                    children = self.sortCallback(children);
-                }
+                // Get children in natural tree key order (same as recursive mode)
+                const children = Object.values(node.children);
                 for (const child of children) {
                     result.push(child);
                     // Only traverse into children if this node is expanded
@@ -118,8 +139,6 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 }
             }
             traverse(startRoot);
-            const computeTime = performance.now() - computeStart;
-            console.log(`[visibleFlatNodes] Computed ${result.length} nodes in ${computeTime.toFixed(2)}ms`);
             // Cache the result
             cachedVisibleFlatNodes = result;
             cachedVisibleFlatNodesTracker = _tracker;
@@ -138,6 +157,12 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
         },
         insertArray: function (data, noEmitChanges = false) {
             data = data || [];
+            // Create per-node signals for O(1) reactive updates
+            nodeSignals = new Map();
+            for (let i = 0; i < data.length; i++) {
+                const id = _idMember ? data[i][_idMember] : i;
+                nodeSignals.set(String(id), new NodeSignal());
+            }
             // Clear any pending indexing from previous calls
             indexer?.clearQueue();
             flatTreeNodes = [];
@@ -171,14 +196,14 @@ 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;
                 return node;
             });
             const conversionTime = perfEnd(`[${_treeId}] insertArray:conversion`, data.length);
-            if (this.shouldDisplayDebugInformation)
-                console.log(`[Tree ${_treeId}] Mapped data before sort`, mappedData);
             perfStart(`[${_treeId}] insertArray:sort`);
             if (!this.isSorted) {
                 if (this.sortCallback)
@@ -186,8 +211,6 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 else
                     mappedData = this._defaultSort(this, mappedData);
             }
-            if (this.shouldDisplayDebugInformation)
-                console.log(`[Tree ${_treeId}] Mapped data after sort`, mappedData);
             const sortTime = perfEnd(`[${_treeId}] insertArray:sort`, data.length);
             perfStart(`[${_treeId}] insertArray:insert`);
             const failedNodes = [];
@@ -228,9 +251,6 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                         // We've processed all nodes up to expandLevel - render now!
                         hasRenderedExpandLevel = true;
                         this._emitTreeChanged();
-                        if (this.shouldDisplayDebugInformation) {
-                            console.log(`[Tree ${_treeId}] Progressive render: Displayed levels 1-${_expandLevel} (${successfulCount} nodes processed so far)`);
-                        }
                     }
                 }
             });
@@ -252,20 +272,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             }
             // Final render (only if we haven't already rendered progressively)
             if (!noEmitChanges) {
-                if (hasRenderedExpandLevel) {
-                    // We already rendered expandLevel, now render the complete tree
-                    this._emitTreeChanged();
-                    if (this.shouldDisplayDebugInformation) {
-                        console.log(`[Tree ${_treeId}] Final render: Complete tree with all ${successfulCount} nodes`);
-                    }
-                }
-                else {
-                    // No progressive rendering occurred, render everything at once
-                    this._emitTreeChanged();
-                    if (this.shouldDisplayDebugInformation) {
-                        console.log(`[Tree ${_treeId}] Single render: All ${successfulCount} nodes (no expandLevel or progressive render conditions met)`);
-                    }
-                }
+                this._emitTreeChanged();
             }
             const insertTime = perfEnd(`[${_treeId}] insertArray:insert`, data.length);
             // Log performance summary
@@ -304,11 +311,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             return null;
         },
         filterNodes(_searchText, _searchOptions) {
-            if (this.shouldDisplayDebugInformation)
-                console.log(`[Tree ${_treeId}] Filtering nodes by:`, _searchText);
             if (isEmptyString(_searchText)) {
-                if (this.shouldDisplayDebugInformation)
-                    console.log(`[Tree ${_treeId}] Search text is empty, cleaning filtered tree and setting isFiltered = false`);
                 // Clear filter when search is empty
                 filteredRoot.children = {};
                 this.isFiltered = false;
@@ -316,33 +319,23 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 return;
             }
             if (!_shouldUseInternalSearchIndex) {
-                if (this.shouldDisplayDebugInformation)
-                    console.warn(`[Tree ${_treeId}] Internal search index is disabled`);
                 return;
             }
             perfStart(`[${_treeId}] filterNodes:search`);
             const resultIndices = searchIndex.search(_searchText, _searchOptions);
             const foundPaths = resultIndices.map((row) => flatTreeNodes[row].path);
             perfEnd(`[${_treeId}] filterNodes:search`, resultIndices.length);
-            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) {
@@ -358,8 +351,6 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     allRequiredPaths.add(segments.slice(0, i).join(this.treePathSeparator));
                 }
             });
-            if (this.shouldDisplayDebugInformation)
-                console.log(`[Tree ${_treeId}] allRequiredPaths`, Array.from(allRequiredPaths));
             // 2. Build filtered tree with only required paths
             const pathToNode = new Map();
             // First pass: create copies of all required nodes
@@ -411,8 +402,6 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             this.isFiltered = true;
             this._emitTreeChanged();
             perfEnd(`[${_treeId}] createFilteredTree`, rootNodes.length);
-            if (this.shouldDisplayDebugInformation)
-                console.log(`[Tree ${_treeId}] Created filtered tree with`, rootNodes.length, 'root nodes');
         },
         clearFilter() {
             filteredRoot.children = {};
@@ -424,7 +413,10 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             perfStart(`[${_treeId}] expandAll`);
             if (isEmptyString(nodePath))
                 flatTreeNodes.forEach((row) => {
-                    row.isExpanded = true;
+                    if (!row.isExpanded) {
+                        row.isExpanded = true;
+                        _bumpRev(row);
+                    }
                 });
             this._emitTreeChanged();
             perfEnd(`[${_treeId}] expandAll`, flatTreeNodes.length);
@@ -433,7 +425,10 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             perfStart(`[${_treeId}] collapseAll`);
             if (isEmptyString(nodePath))
                 flatTreeNodes.forEach((row) => {
-                    row.isExpanded = false;
+                    if (row.isExpanded) {
+                        row.isExpanded = false;
+                        _bumpRev(row);
+                    }
                 });
             this._emitTreeChanged();
             perfEnd(`[${_treeId}] collapseAll`, flatTreeNodes.length);
@@ -470,13 +465,13 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     // Only mark as changed if actually changing from collapsed to expanded
                     if (!node.isExpanded) {
                         node.isExpanded = true;
+                        _bumpRev(node);
                         hasChanges = true;
                     }
                 }
             }
             // Only emit changes if something actually changed
             if (!noEmitChanges && hasChanges) {
-                console.log(`[Tree ${_treeId}] expandNodes triggering re-render for path: ${path}`);
                 this._emitTreeChanged();
             }
             perfEnd(`[${_treeId}] expandNodes`);
@@ -493,6 +488,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     // Only mark as changed if actually changing from expanded to collapsed
                     if (node.isExpanded) {
                         node.isExpanded = false;
+                        _bumpRev(node);
                         hasChanges = true;
                     }
                 }
@@ -532,9 +528,25 @@ 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();
         },
+        getNodeSignal(id) {
+            return nodeSignals.get(id);
+        },
+        bumpNodeRev(node) {
+            _bumpNodeRev(node);
+        },
         /**
          * Get direct children of a node at the given path
          * @param parentPath - Path to parent node (empty string for root)
@@ -599,9 +611,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 newChildren[segment] = child;
             });
             parent.children = newChildren;
-            if (this.shouldDisplayDebugInformation) {
-                console.log(`[Tree ${_treeId}] refreshSiblings: Re-sorted ${sorted.length} children under "${parentPath || 'root'}":`, sorted.map(s => ({ path: s.path, sortOrder: s.data?.[this.orderMember] })));
-            }
+            _bumpRev(parent);
             this._emitTreeChanged();
         },
         /**
@@ -610,9 +620,10 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
          * @param path - Path to the node to refresh
          */
         refreshNode(path) {
-            // For now, just trigger a tree change
-            // Future optimization: only re-render the specific subtree
-            this._emitTreeChanged();
+            const node = this.getNodeByPath(path);
+            if (node) {
+                _bumpNodeRev(node);
+            }
         },
         /**
          * Move a node to a new location in the tree
@@ -645,6 +656,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             // Remove source from current parent
             const sourceSegment = segmentPrefix + sourceNode.pathSegment;
             delete sourceParent.children[sourceSegment];
+            _bumpRev(sourceParent);
             // Update source parent's hasChildren
             if (Object.keys(sourceParent.children).length === 0) {
                 sourceParent.hasChildren = false;
@@ -691,6 +703,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             }
             // Update all descendants' paths recursively
             this._updateDescendantPaths(sourceNode, oldPath, newPath);
+            _bumpRev(sourceNode);
             // Insert into new parent
             newParent.children[segmentPrefix + newSegment] = sourceNode;
             newParent.hasChildren = true;
@@ -706,7 +719,9 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                         .filter(o => o < targetOrder)
                         .sort((a, b) => b - a);
                     const belowOrder = siblingOrders[0] ?? targetOrder - 20;
-                    sourceNode.data[this.orderMember] = Math.floor((belowOrder + targetOrder) / 2);
+                    const newOrder = Math.floor((belowOrder + targetOrder) / 2);
+                    console.log(`[moveNode] position=above, targetOrder=${targetOrder}, belowOrder=${belowOrder}, newOrder=${newOrder}, siblingOrders=`, siblings.map(s => ({ path: s.path, order: s.data?.[this.orderMember] })));
+                    sourceNode.data[this.orderMember] = newOrder;
                 }
                 else {
                     // Find order value just above target
@@ -716,11 +731,24 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                         .filter(o => o > targetOrder)
                         .sort((a, b) => a - b);
                     const aboveOrder = siblingOrders[0] ?? targetOrder + 20;
-                    sourceNode.data[this.orderMember] = Math.floor((targetOrder + aboveOrder) / 2);
+                    const newOrder = Math.floor((targetOrder + aboveOrder) / 2);
+                    console.log(`[moveNode] position=below, targetOrder=${targetOrder}, aboveOrder=${aboveOrder}, newOrder=${newOrder}, siblingOrders=`, siblings.map(s => ({ path: s.path, order: s.data?.[this.orderMember] })));
+                    sourceNode.data[this.orderMember] = newOrder;
                 }
             }
+            else if (position !== 'child') {
+                console.log(`[moveNode] position=${position}, but orderMember=${this.orderMember}, sourceNode.data=${!!sourceNode.data} — order NOT calculated`);
+            }
             // Re-sort siblings if needed
             this.refreshSiblings(newParentPath);
+            // Log final sibling order after refresh
+            {
+                const parent = newParentPath ? this.getNodeByPath(newParentPath) : root;
+                if (parent) {
+                    const finalOrder = Object.values(parent.children).map((s) => ({ path: s.path, order: s.data?.[this.orderMember] }));
+                    console.log(`[moveNode] Final sibling order after refreshSiblings:`, finalOrder);
+                }
+            }
             return { success: true };
         },
         /**
@@ -764,6 +792,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             // Remove from parent
             const segment = segmentPrefix + node.pathSegment;
             delete parent.children[segment];
+            _bumpRev(parent);
             // Update parent's hasChildren
             if (Object.keys(parent.children).length === 0) {
                 parent.hasChildren = false;
@@ -824,6 +853,10 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             if (_pathMember && data) {
                 data[_pathMember] = newPath;
             }
+            // Create per-node signal for O(1) reactive updates
+            if (newNode.id !== undefined) {
+                nodeSignals.set(String(newNode.id), new NodeSignal());
+            }
             // Add to parent
             const targetParent = parent || root;
             targetParent.children[segmentPrefix + pathSegment] = newNode;
@@ -835,10 +868,6 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             flatTreeNodes.push(newNode);
             // Re-sort siblings to place new node in correct position
             this.refreshSiblings(parentPath);
-            if (this.shouldDisplayDebugInformation) {
-                const siblings = Object.values(targetParent.children);
-                console.log(`[Tree ${_treeId}] addNode: Added "${newPath}" to "${parentPath || 'root'}". Siblings after sort:`, siblings.map(s => ({ path: s.path, sortOrder: s.data?.[this.orderMember] })));
-            }
             this._emitTreeChanged();
             return { success: true, node: newNode };
         },
@@ -858,9 +887,6 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             }
             // Check if orderMember is being updated (will need re-sort)
             const orderMemberUpdated = this.orderMember && this.orderMember in dataUpdates;
-            if (this.shouldDisplayDebugInformation) {
-                console.log(`[Tree ${_treeId}] updateNode: "${path}" updating:`, dataUpdates);
-            }
             // Merge updates into existing data
             node.data = { ...node.data, ...dataUpdates };
             // Re-index for search if needed
@@ -870,11 +896,14 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     indexer.addItem({ node, index: flatIndex });
                 }
             }
-            // Re-sort siblings if order was updated
+            // Re-sort siblings if order was updated (structural change)
             if (orderMemberUpdated) {
+                _bumpRev(node);
                 this.refreshSiblings(node.parentPath || '');
+                return { success: true, node };
             }
-            this._emitTreeChanged();
+            // Data-only change — signal only, skip _emitTreeChanged for O(1) update
+            _bumpNodeRev(node);
             return { success: true, node };
         },
         /**
@@ -986,6 +1015,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             // Handle positioning relative to sibling if specified
             if (siblingPath && position && rootNode.data) {
                 const siblingNode = this.getNodeByPath(siblingPath);
+                console.log(`[copyNodeWithDescendants] Positioning: siblingPath=${siblingPath}, position=${position}, siblingFound=${!!siblingNode}, orderMember=${this.orderMember}`);
                 if (siblingNode && this.orderMember) {
                     // Get the parent to access siblings
                     const parent = targetParentPath ? this.getNodeByPath(targetParentPath) : root;
@@ -1000,7 +1030,9 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                                 .filter(o => o < siblingOrder)
                                 .sort((a, b) => b - a);
                             const belowOrder = siblingOrders[0] ?? siblingOrder - 20;
-                            rootNode.data[this.orderMember] = Math.floor((belowOrder + siblingOrder) / 2);
+                            const newOrder = Math.floor((belowOrder + siblingOrder) / 2);
+                            console.log(`[copyNodeWithDescendants] position=above, siblingOrder=${siblingOrder}, belowOrder=${belowOrder}, newOrder=${newOrder}`);
+                            rootNode.data[this.orderMember] = newOrder;
                         }
                         else {
                             // Find order value just above sibling
@@ -1010,15 +1042,26 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                                 .filter(o => o > siblingOrder)
                                 .sort((a, b) => a - b);
                             const aboveOrder = siblingOrders[0] ?? siblingOrder + 20;
-                            rootNode.data[this.orderMember] = Math.floor((siblingOrder + aboveOrder) / 2);
+                            const newOrder = Math.floor((siblingOrder + aboveOrder) / 2);
+                            console.log(`[copyNodeWithDescendants] position=below, siblingOrder=${siblingOrder}, aboveOrder=${aboveOrder}, newOrder=${newOrder}`);
+                            rootNode.data[this.orderMember] = newOrder;
                         }
                         // Re-sort siblings
                         this.refreshSiblings(targetParentPath);
+                        // Log final order
+                        const finalOrder = Object.values(parent.children).map((s) => ({ path: s.path, order: s.data?.[this.orderMember] }));
+                        console.log(`[copyNodeWithDescendants] Final sibling order:`, finalOrder);
                     }
                 }
+                else if (!siblingNode) {
+                    console.warn(`[copyNodeWithDescendants] Sibling not found at path: ${siblingPath}`);
+                }
+                else if (!this.orderMember) {
+                    console.warn(`[copyNodeWithDescendants] No orderMember set — cannot position`);
+                }
             }
-            if (this.shouldDisplayDebugInformation) {
-                console.log(`[Tree ${_treeId}] copyNodeWithDescendants: Copied ${totalCount} nodes to "${targetParentPath}"${siblingPath ? ` ${position} "${siblingPath}"` : ''}`);
+            else {
+                console.log(`[copyNodeWithDescendants] No positioning: siblingPath=${siblingPath}, position=${position}, hasData=${!!rootNode.data}`);
             }
             return { success: true, rootNode, count: totalCount };
         },
@@ -1049,7 +1092,11 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             const pathSet = new Set(paths);
             const traverse = (node) => {
                 if (node.path) {
-                    node.isExpanded = pathSet.has(node.path);
+                    const shouldExpand = pathSet.has(node.path);
+                    if (node.isExpanded !== shouldExpand) {
+                        node.isExpanded = shouldExpand;
+                        _bumpRev(node);
+                    }
                 }
                 for (const child of Object.values(node.children)) {
                     traverse(child);

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>[];
@@ -98,6 +100,10 @@ export interface Ltree<T> {
     getSiblings(path: string): LTreeNode<T>[];
     refreshSiblings(parentPath: string): void;
     refreshNode(path: string): void;
+    bumpNodeRev(node: LTreeNode<T>): void;
+    getNodeSignal(id: string): {
+        readonly value: number;
+    } | undefined;
     moveNode(sourcePath: string, targetPath: string, position: 'above' | 'below' | 'child'): {
         success: boolean;
         error?: string;

package/dist/styles/main.scss

@@ -74,6 +74,36 @@ $light-color: #f8f9fa !default;
 $border-color: #dee2e6 !default;
 $body-color: #212529 !default;
 
+// Mixin: expand horizontal zone layout when zones are hidden (used by "above" and "below" layouts)
+@mixin zone-horizontal-expansion {
+	// Two zones: first present zone gets left half
+	&:not(:has(.ltree-drop-child)) .ltree-drop-above,
+	&:not(:has(.ltree-drop-below)) .ltree-drop-above,
+	&:not(:has(.ltree-drop-above)) .ltree-drop-below {
+		left: var(--drop-zone-start, 33%);
+		right: calc((100% - var(--drop-zone-start, 33%)) / 2);
+		border-radius: $drop-zone-border-radius 0 0 $drop-zone-border-radius;
+	}
+
+	// Two zones: second present zone gets right half
+	&:not(:has(.ltree-drop-child)) .ltree-drop-below,
+	&:not(:has(.ltree-drop-below)) .ltree-drop-child,
+	&:not(:has(.ltree-drop-above)) .ltree-drop-child {
+		left: calc(var(--drop-zone-start, 33%) + (100% - var(--drop-zone-start, 33%)) / 2);
+		right: 0;
+		border-radius: 0 $drop-zone-border-radius $drop-zone-border-radius 0;
+	}
+
+	// Single zone: full width
+	&:not(:has(.ltree-drop-below)):not(:has(.ltree-drop-child)) .ltree-drop-above,
+	&:not(:has(.ltree-drop-above)):not(:has(.ltree-drop-child)) .ltree-drop-below,
+	&:not(:has(.ltree-drop-above)):not(:has(.ltree-drop-below)) .ltree-drop-child {
+		left: var(--drop-zone-start, 33%);
+		right: 0;
+		border-radius: $drop-zone-border-radius;
+	}
+}
+
 :root {
 	--tree-node-indent-per-level: #{$tree-node-indent-per-level};
 	--ltree-primary: #{$primary-color};
@@ -103,8 +133,15 @@ $body-color: #212529 !default;
 	}
 }
 
+// Virtual scroll container
+.ltree-virtual-scroll {
+	overflow-y: auto !important;
+	overflow-x: visible;
+	overscroll-behavior: contain;
+}
+
 // Ensure all tree ancestors allow overflow for drop zones
-.ltree-tree,
+.ltree-tree:not(.ltree-virtual-scroll),
 .ltree-node,
 .ltree-node-row,
 .ltree-children {
@@ -579,12 +616,8 @@ $body-color: #212529 !default;
 }
 
 // Drop Zone Container - wraps all zones with CSS variable for start position
+// Position is set inline (fixed) by Tree.svelte for the floating overlay
 .ltree-drop-zones {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	pointer-events: none; // Let children handle pointer events
 	overflow: visible;
 }
@@ -668,6 +701,14 @@ $body-color: #212529 !default;
 		transform: translateY(100%);
 		// border-radius: 0 0 4px 0;
 	}
+
+	// Zone expansion: when a zone is hidden, remaining zones fill the gap
+	&:not(:has(.ltree-drop-child)) .ltree-drop-below {
+		right: 0;
+	}
+	&:not(:has(.ltree-drop-below)) .ltree-drop-child {
+		left: var(--drop-zone-start, 33%);
+	}
 }
 
 // Layout: "above" - All 3 zones in a row above the node
@@ -696,6 +737,9 @@ $body-color: #212529 !default;
 		right: 0;
 		border-radius: 0 $drop-zone-border-radius $drop-zone-border-radius 0;
 	}
+
+	// Zone expansion: when a zone is hidden, remaining zones fill the gap
+	@include zone-horizontal-expansion;
 }
 
 // Layout: "below" - All 3 zones in a row below the node
@@ -724,6 +768,9 @@ $body-color: #212529 !default;
 		right: 0;
 		border-radius: 0 $drop-zone-border-radius $drop-zone-border-radius 0;
 	}
+
+	// Zone expansion: when a zone is hidden, remaining zones fill the gap
+	@include zone-horizontal-expansion;
 }
 
 // Layout: "wave" - Zones stacked vertically (above/child/below)