@keenmate/svelte-treeview 4.6.0 → 4.8.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;
@@ -54,13 +56,19 @@ declare function $$render<T>(): {
         /**
          * 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
+         * - Per-node reactive signals for O(1) data-only updates (updateNode, selection)
          */
         useFlatRendering?: boolean;
-        /** Indentation per level in flat rendering mode (CSS value, default: '1.5rem') */
-        flatIndentSize?: string;
+        /** Enable virtual scrolling in flat mode. Only visible nodes + overscan are rendered. */
+        virtualScroll?: boolean;
+        /** Explicit row height in px. Auto-measured from first row if not set. */
+        virtualRowHeight?: number;
+        /** Extra rows above/below viewport (default: 5) */
+        virtualOverscan?: number;
+        /** CSS height for scroll container. Auto-detected from parent if not set, fallback 400px. */
+        virtualContainerHeight?: string;
         dragDropMode?: DragDropMode;
         dropZoneMode?: "floating" | "glow";
         dropZoneLayout?: "around" | "above" | "below" | "wave" | "wave2";
@@ -129,7 +137,7 @@ declare function $$render<T>(): {
             error?: string;
         };
         applyChanges: (changes: import("../ltree/types").TreeChange<T>[]) => import("../ltree/types").ApplyChangesResult;
-        copyNodeWithDescendants: (sourceNode: LTreeNode<T>, targetParentPath: string, transformData: (data: T) => T) => {
+        copyNodeWithDescendants: (sourceNode: LTreeNode<T>, targetParentPath: string, transformData: (data: T) => T, siblingPath?: string, position?: "above" | "below") => {
             success: boolean;
             rootNode?: LTreeNode<T>;
             count: number;
@@ -158,6 +166,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;
@@ -199,13 +209,19 @@ declare function $$render<T>(): {
             /**
              * 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
+             * - Per-node reactive signals for O(1) data-only updates (updateNode, selection)
              */
             useFlatRendering?: boolean;
-            /** Indentation per level in flat rendering mode (CSS value, default: '1.5rem') */
-            flatIndentSize?: string;
+            /** Enable virtual scrolling in flat mode. Only visible nodes + overscan are rendered. */
+            virtualScroll?: boolean;
+            /** Explicit row height in px. Auto-measured from first row if not set. */
+            virtualRowHeight?: number;
+            /** Extra rows above/below viewport (default: 5) */
+            virtualOverscan?: number;
+            /** CSS height for scroll container. Auto-detected from parent if not set, fallback 400px. */
+            virtualContainerHeight?: string;
             dragDropMode?: DragDropMode;
             dropZoneMode?: "floating" | "glow";
             dropZoneLayout?: "around" | "above" | "below" | "wave" | "wave2";
@@ -241,7 +257,7 @@ declare function $$render<T>(): {
             scrollHighlightClass?: string | null | undefined;
             contextMenuXOffset?: number | null | undefined;
             contextMenuYOffset?: number | null | undefined;
-        }, "treeId" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "isSelectedMember" | "isDraggableMember" | "isDropAllowedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "orderMember" | "isSorted" | "sortCallback" | "data" | "selectedNode" | "expandLevel" | "shouldToggleOnNodeClick" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayDebugInformation" | "shouldDisplayContextMenuInDebugMode" | "onNodeClicked" | "onNodeDragStart" | "onNodeDragOver" | "beforeDropCallback" | "onNodeDrop" | "contextMenuCallback" | "dragDropMode" | "dropZoneMode" | "bodyClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "selectedNodeClass" | "dragOverNodeClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
+        }, "treeId" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "isSelectedMember" | "isDraggableMember" | "isDropAllowedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "orderMember" | "isSorted" | "sortCallback" | "data" | "selectedNode" | "expandLevel" | "shouldToggleOnNodeClick" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayDebugInformation" | "shouldDisplayContextMenuInDebugMode" | "onNodeClicked" | "onNodeDragStart" | "onNodeDragOver" | "beforeDropCallback" | "onNodeDrop" | "contextMenuCallback" | "dragDropMode" | "dropZoneMode" | "bodyClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "selectedNodeClass" | "dragOverNodeClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset" | "virtualScroll" | "virtualRowHeight" | "virtualOverscan" | "virtualContainerHeight">>) => void;
     };
     bindings: "data" | "selectedNode" | "insertResult" | "searchText" | "isRendering";
     slots: {};
@@ -284,7 +300,7 @@ declare class __sveltets_Render<T> {
             error?: string;
         };
         applyChanges: (changes: import("../ltree/types.js").TreeChange<T>[]) => import("../ltree/types").ApplyChangesResult;
-        copyNodeWithDescendants: (sourceNode: LTreeNode<T>, targetParentPath: string, transformData: (data: T) => T) => {
+        copyNodeWithDescendants: (sourceNode: LTreeNode<T>, targetParentPath: string, transformData: (data: T) => T, siblingPath?: string, position?: "above" | "below") => {
             success: boolean;
             rootNode?: LTreeNode<T> | undefined;
             count: number;
@@ -313,6 +329,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;
@@ -354,13 +372,19 @@ declare class __sveltets_Render<T> {
             /**
              * 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
+             * - Per-node reactive signals for O(1) data-only updates (updateNode, selection)
              */
             useFlatRendering?: boolean;
-            /** Indentation per level in flat rendering mode (CSS value, default: '1.5rem') */
-            flatIndentSize?: string;
+            /** Enable virtual scrolling in flat mode. Only visible nodes + overscan are rendered. */
+            virtualScroll?: boolean;
+            /** Explicit row height in px. Auto-measured from first row if not set. */
+            virtualRowHeight?: number;
+            /** Extra rows above/below viewport (default: 5) */
+            virtualOverscan?: number;
+            /** CSS height for scroll container. Auto-detected from parent if not set, fallback 400px. */
+            virtualContainerHeight?: string;
             dragDropMode?: DragDropMode;
             dropZoneMode?: "floating" | "glow";
             dropZoneLayout?: "around" | "above" | "below" | "wave" | "wave2";
@@ -396,7 +420,7 @@ declare class __sveltets_Render<T> {
             scrollHighlightClass?: string | null | undefined;
             contextMenuXOffset?: number | null | undefined;
             contextMenuYOffset?: number | null | undefined;
-        }, "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;
+        }, "treeId" | "data" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "orderMember" | "isSorted" | "sortCallback" | "isDraggableMember" | "isDropAllowedMember" | "shouldDisplayDebugInformation" | "isSelectedMember" | "selectedNode" | "expandLevel" | "shouldToggleOnNodeClick" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayContextMenuInDebugMode" | "virtualScroll" | "virtualRowHeight" | "virtualOverscan" | "virtualContainerHeight" | "dragDropMode" | "dropZoneMode" | "onNodeClicked" | "onNodeDragStart" | "onNodeDragOver" | "beforeDropCallback" | "onNodeDrop" | "contextMenuCallback" | "bodyClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "selectedNodeClass" | "dragOverNodeClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
     };
 }
 interface $$IsomorphicComponent {

package/dist/constants.generated.d.ts

@@ -1,4 +1,4 @@
-export declare const VERSION = "4.6.0";
+export declare const VERSION = "4.8.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.8.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
@@ -137,7 +138,9 @@ export class Indexer {
         this.isProcessing = false;
         indexLogger.info(`[${this.treeId}] Indexing complete. Processed ${this.totalItemsProcessed} items.`);
         if (this.onCompleteCallback) {
-            this.onCompleteCallback();
+            const cb = this.onCompleteCallback;
+            this.onCompleteCallback = undefined;
+            cb();
         }
     }
     // Get current indexer status

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;
@@ -25,5 +27,6 @@ export interface LTreeNode<T> {
     isExpanded: boolean;
     isSelected: boolean;
     isSelectable: boolean;
+    _rev: number;
 }
 export declare function createLTreeNode<T>(data?: Partial<LTreeNode<T>>): LTreeNode<T>;

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,
@@ -26,6 +27,7 @@ export function createLTreeNode(data) {
         isExpanded: false,
         isSelected: false,
         isSelectable: true,
+        _rev: 0,
         ...data
     };
 }

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>;