@keenmate/svelte-treeview 4.5.0 → 4.7.0

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;
@@ -45,11 +47,22 @@ declare function $$render<T>(): {
         shouldDisplayContextMenuInDebugMode?: boolean;
         isLoading?: boolean;
         progressiveRender?: boolean;
-        renderBatchSize?: number;
+        initialBatchSize?: number;
+        maxBatchSize?: number;
         isRendering?: boolean;
         onRenderStart?: () => void;
         onRenderProgress?: (stats: RenderStats) => void;
         onRenderComplete?: (stats: RenderStats) => void;
+        /**
+         * Use flat/centralized rendering instead of recursive node rendering.
+         * This significantly improves performance for large trees by:
+         * - Removing the {#key changeTracker} block that destroys all nodes on any change
+         * - Using a single flat loop instead of recursive component instantiation
+         * - Allowing Svelte's keyed {#each} to efficiently diff only changed nodes
+         */
+        useFlatRendering?: boolean;
+        /** Indentation per level in flat rendering mode (CSS value, default: '1.5rem') */
+        flatIndentSize?: string;
         dragDropMode?: DragDropMode;
         dropZoneMode?: "floating" | "glow";
         dropZoneLayout?: "around" | "above" | "below" | "wave" | "wave2";
@@ -64,11 +77,15 @@ declare function $$render<T>(): {
          * Called before a drop is processed. Return false to cancel the drop.
          * Return { position, operation } to override the drop position or operation.
          * Return true or undefined to proceed normally.
+         * Can be async - return a Promise to show dialogs or perform async validation.
          */
         beforeDropCallback?: (dropNode: LTreeNode<T> | null, draggedNode: LTreeNode<T>, position: DropPosition, event: DragEvent | TouchEvent, operation: DropOperation) => boolean | {
             position?: DropPosition;
             operation?: DropOperation;
-        } | void;
+        } | void | Promise<boolean | {
+            position?: DropPosition;
+            operation?: DropOperation;
+        } | void>;
         onNodeDrop?: (dropNode: LTreeNode<T> | null, draggedNode: LTreeNode<T>, position: DropPosition, event: DragEvent | TouchEvent, operation: DropOperation) => void;
         contextMenuCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[];
         bodyClass?: string | null | undefined;
@@ -125,7 +142,10 @@ declare function $$render<T>(): {
         getAllData: () => T[];
         closeContextMenu: () => void;
         scrollToPath: (path: string, options?: {
+            /** Expand ancestors to make the node visible (default: true) */
             expand?: boolean;
+            /** Also expand the target node itself to show its children (default: false for performance) */
+            expandTarget?: boolean;
             highlight?: boolean;
             scrollOptions?: ScrollIntoViewOptions;
             /** Scroll only within the nearest scrollable container (prevents page scroll) */
@@ -140,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;
@@ -172,11 +194,22 @@ declare function $$render<T>(): {
             shouldDisplayContextMenuInDebugMode?: boolean;
             isLoading?: boolean;
             progressiveRender?: boolean;
-            renderBatchSize?: number;
+            initialBatchSize?: number;
+            maxBatchSize?: number;
             isRendering?: boolean;
             onRenderStart?: () => void;
             onRenderProgress?: (stats: RenderStats) => void;
             onRenderComplete?: (stats: RenderStats) => void;
+            /**
+             * Use flat/centralized rendering instead of recursive node rendering.
+             * This significantly improves performance for large trees by:
+             * - Removing the {#key changeTracker} block that destroys all nodes on any change
+             * - Using a single flat loop instead of recursive component instantiation
+             * - Allowing Svelte's keyed {#each} to efficiently diff only changed nodes
+             */
+            useFlatRendering?: boolean;
+            /** Indentation per level in flat rendering mode (CSS value, default: '1.5rem') */
+            flatIndentSize?: string;
             dragDropMode?: DragDropMode;
             dropZoneMode?: "floating" | "glow";
             dropZoneLayout?: "around" | "above" | "below" | "wave" | "wave2";
@@ -191,11 +224,15 @@ declare function $$render<T>(): {
              * Called before a drop is processed. Return false to cancel the drop.
              * Return { position, operation } to override the drop position or operation.
              * Return true or undefined to proceed normally.
+             * Can be async - return a Promise to show dialogs or perform async validation.
              */
             beforeDropCallback?: (dropNode: LTreeNode<T> | null, draggedNode: LTreeNode<T>, position: DropPosition, event: DragEvent | TouchEvent, operation: DropOperation) => boolean | {
                 position?: DropPosition;
                 operation?: DropOperation;
-            } | void;
+            } | void | Promise<boolean | {
+                position?: DropPosition;
+                operation?: DropOperation;
+            } | void>;
             onNodeDrop?: (dropNode: LTreeNode<T> | null, draggedNode: LTreeNode<T>, position: DropPosition, event: DragEvent | TouchEvent, operation: DropOperation) => void;
             contextMenuCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[];
             bodyClass?: string | null | undefined;
@@ -262,7 +299,10 @@ declare class __sveltets_Render<T> {
         getAllData: () => T[];
         closeContextMenu: () => void;
         scrollToPath: (path: string, options?: {
+            /** Expand ancestors to make the node visible (default: true) */
             expand?: boolean;
+            /** Also expand the target node itself to show its children (default: false for performance) */
+            expandTarget?: boolean;
             highlight?: boolean;
             scrollOptions?: ScrollIntoViewOptions;
             /** Scroll only within the nearest scrollable container (prevents page scroll) */
@@ -277,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;
@@ -309,11 +351,22 @@ declare class __sveltets_Render<T> {
             shouldDisplayContextMenuInDebugMode?: boolean;
             isLoading?: boolean;
             progressiveRender?: boolean;
-            renderBatchSize?: number;
+            initialBatchSize?: number;
+            maxBatchSize?: number;
             isRendering?: boolean;
             onRenderStart?: (() => void) | undefined;
             onRenderProgress?: ((stats: RenderStats) => void) | undefined;
             onRenderComplete?: ((stats: RenderStats) => void) | undefined;
+            /**
+             * Use flat/centralized rendering instead of recursive node rendering.
+             * This significantly improves performance for large trees by:
+             * - Removing the {#key changeTracker} block that destroys all nodes on any change
+             * - Using a single flat loop instead of recursive component instantiation
+             * - Allowing Svelte's keyed {#each} to efficiently diff only changed nodes
+             */
+            useFlatRendering?: boolean;
+            /** Indentation per level in flat rendering mode (CSS value, default: '1.5rem') */
+            flatIndentSize?: string;
             dragDropMode?: DragDropMode;
             dropZoneMode?: "floating" | "glow";
             dropZoneLayout?: "around" | "above" | "below" | "wave" | "wave2";
@@ -328,11 +381,15 @@ declare class __sveltets_Render<T> {
              * Called before a drop is processed. Return false to cancel the drop.
              * Return { position, operation } to override the drop position or operation.
              * Return true or undefined to proceed normally.
+             * Can be async - return a Promise to show dialogs or perform async validation.
              */
             beforeDropCallback?: ((dropNode: LTreeNode<T> | null, draggedNode: LTreeNode<T>, position: DropPosition, event: DragEvent | TouchEvent, operation: DropOperation) => boolean | void | {
                 position?: DropPosition;
                 operation?: DropOperation;
-            }) | undefined;
+            } | Promise<boolean | void | {
+                position?: DropPosition;
+                operation?: DropOperation;
+            }>) | undefined;
             onNodeDrop?: ((dropNode: LTreeNode<T> | null, draggedNode: LTreeNode<T>, position: DropPosition, event: DragEvent | TouchEvent, operation: DropOperation) => void) | undefined;
             contextMenuCallback?: ((node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[]) | undefined;
             bodyClass?: string | null | undefined;
@@ -345,7 +402,7 @@ declare class __sveltets_Render<T> {
             scrollHighlightClass?: string | null | undefined;
             contextMenuXOffset?: number | null | undefined;
             contextMenuYOffset?: number | null | undefined;
-        }, "treeId" | "data" | "onNodeClicked" | "onNodeDragStart" | "onNodeDragOver" | "onNodeDrop" | "shouldToggleOnNodeClick" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "selectedNodeClass" | "dragOverNodeClass" | "dropZoneMode" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "orderMember" | "isSorted" | "sortCallback" | "isDraggableMember" | "isDropAllowedMember" | "shouldDisplayDebugInformation" | "isSelectedMember" | "selectedNode" | "expandLevel" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayContextMenuInDebugMode" | "dragDropMode" | "beforeDropCallback" | "contextMenuCallback" | "bodyClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
+        }, "treeId" | "data" | "shouldToggleOnNodeClick" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "selectedNodeClass" | "dragOverNodeClass" | "dropZoneMode" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "orderMember" | "isSorted" | "sortCallback" | "isDraggableMember" | "isDropAllowedMember" | "shouldDisplayDebugInformation" | "isSelectedMember" | "selectedNode" | "expandLevel" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayContextMenuInDebugMode" | "dragDropMode" | "onNodeClicked" | "onNodeDragStart" | "onNodeDragOver" | "beforeDropCallback" | "onNodeDrop" | "contextMenuCallback" | "bodyClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
     };
 }
 interface $$IsomorphicComponent {

package/dist/constants.generated.d.ts

@@ -1,4 +1,4 @@
-export declare const VERSION = "4.5.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.5.0";
+export const VERSION = "4.7.0";
 export const PACKAGE_NAME = "@keenmate/svelte-treeview";
 export const AUTHOR = "KeenMate";
 export const LICENSE = "MIT";

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as Tree } from "./components/Tree.svelte";
 export type { LTreeNode, NodeId, VisualState } from "./ltree/ltree-node.svelte";
 export type { Ltree, DropPosition, DragDropMode, DropOperation, ContextMenuItem, InsertArrayResult, TreeChange, ApplyChangesResult } from "./ltree/types";
 export type { RenderStats } from "./components/RenderCoordinator.svelte";
+export type { NodeCallbacks, NodeConfig } from "./components/Tree.svelte";
 export { enableLogging, disableLogging, setLogLevel, setCategoryLevel, LOGGING_CATEGORIES } from "./logger";
 export { enablePerfLogging, disablePerfLogging, setPerfThreshold, isPerfLoggingEnabled, perfStart, perfEnd, perfMeasure, perfSummary } from "./perf-logger";
 export type { GlobalTreeviewAPI } from "./global-api";

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
@@ -31,6 +32,9 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
     let flatTreeNodes = [];
     let filteredTree = null;
     let isFiltered = false;
+    // Cache for visibleFlatNodes - only recompute when tree changes
+    let cachedVisibleFlatNodes = [];
+    let cachedVisibleFlatNodesTracker = null;
     // Async search indexing infrastructure
     let indexer = null;
     // Initialize indexer when search index is available
@@ -54,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
@@ -74,6 +80,54 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             }
             return Object.values(root.children);
         },
+        /**
+         * Returns a flat array of all visible nodes in render order (depth-first).
+         * A node is visible if all its ancestors are expanded.
+         * This is optimized for flat/centralized rendering without recursion.
+         *
+         * Note: This getter depends on changeTracker to ensure reactivity when
+         * nodes are expanded/collapsed or the tree structure changes.
+         * Results are cached to avoid recomputation on repeated access.
+         */
+        get visibleFlatNodes() {
+            // Explicitly read changeTracker to create reactive dependency
+            const _tracker = changeTracker;
+            // Return cached result if changeTracker hasn't changed
+            if (_tracker === cachedVisibleFlatNodesTracker && cachedVisibleFlatNodes.length > 0) {
+                // console.log(`[visibleFlatNodes] Cache HIT - returning ${cachedVisibleFlatNodes.length} nodes`);
+                return cachedVisibleFlatNodes;
+            }
+            const computeStart = performance.now();
+            const startRoot = this.isFiltered ? filteredRoot : root;
+            if (!startRoot?.children || !_tracker) {
+                cachedVisibleFlatNodes = [];
+                cachedVisibleFlatNodesTracker = _tracker;
+                return cachedVisibleFlatNodes;
+            }
+            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);
+                }
+                for (const child of children) {
+                    result.push(child);
+                    // Only traverse into children if this node is expanded
+                    if (child.isExpanded && child.hasChildren) {
+                        traverse(child);
+                    }
+                }
+            }
+            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;
+            return result;
+        },
         get statistics() {
             const filteredNodeCount = isFiltered ? filteredTree?.length || 0 : 0;
             const indexerStatus = indexer?.getStatus() || { isProcessing: false, queueSize: 0 };
@@ -120,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;
@@ -408,31 +464,46 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             }
         },
         expandNodes: function (path, noEmitChanges = false) {
+            perfStart(`[${_treeId}] expandNodes`);
             let node = this.isFiltered ? filteredRoot : root;
+            let hasChanges = false;
             const segments = path.split(this.treePathSeparator);
             for (let i = 0; i < segments.length; i++) {
                 const segment = segmentPrefix + segments[i];
                 if (node.children.hasOwnProperty(segment)) {
                     node = node.children[segment];
-                    node.isExpanded = true;
+                    // Only mark as changed if actually changing from collapsed to expanded
+                    if (!node.isExpanded) {
+                        node.isExpanded = true;
+                        hasChanges = true;
+                    }
                 }
             }
-            if (!noEmitChanges) {
+            // 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`);
             return this; // Return the API object for chaining
         },
         collapseNodes: function (path, noEmitChanges = false) {
             let node = this.isFiltered ? filteredRoot : this.root;
+            let hasChanges = false;
             const segments = path.split(this.treePathSeparator);
             for (let i = 0; i < segments.length; i++) {
                 const segment = segmentPrefix + segments[i];
                 if (node.children.hasOwnProperty(segment)) {
                     node = node.children[segment];
-                    node.isExpanded = false;
+                    // Only mark as changed if actually changing from expanded to collapsed
+                    if (node.isExpanded) {
+                        node.isExpanded = false;
+                        hasChanges = true;
+                    }
                 }
             }
-            if (!noEmitChanges) {
+            // Only emit changes if something actually changed
+            if (!noEmitChanges && hasChanges) {
                 this._emitTreeChanged();
             }
             return this; // Return the API object for chaining
@@ -466,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();
         },
@@ -613,8 +694,8 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 }
             }
             const newPath = newParentPath ? `${newParentPath}${this.treePathSeparator}${newSegment}` : newSegment;
-            // Update source node's path and parentPath
             const oldPath = sourceNode.path;
+            // Update source node's path and parentPath
             sourceNode.path = newPath;
             sourceNode.pathSegment = newSegment;
             sourceNode.parentPath = newParentPath || null;

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,8 +68,13 @@ 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>[];
     get statistics(): {
         nodeCount: number;
         maxLevel: number;

package/package.json

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