@keenmate/svelte-treeview 4.8.0 → 5.0.0-rc02

package/dist/ltree/types.d.ts

@@ -1,6 +1,6 @@
 import type { SearchOptions } from 'flexsearch';
-import type { LTreeNode, DropPosition } from './ltree-node.svelte';
-export type { LTreeNode, DropPosition } from './ltree-node.svelte';
+import type { LTreeNode, DropPosition } from './ltree-node.svelte.js';
+export type { LTreeNode, DropPosition } from './ltree-node.svelte.js';
 export type Tuple<T, U> = [T, U];
 export type DragDropMode = 'none' | 'self' | 'cross' | 'both';
 export type DropZoneLayout = 'around' | 'above' | 'below' | 'wave' | 'wave2';
@@ -67,17 +67,25 @@ export interface Ltree<T> {
     isFiltered: boolean;
     isSelectableMember: string | null | undefined;
     isDraggableMember: string | null | undefined;
+    getIsDraggableCallback?: (node: LTreeNode<T>) => boolean;
     isDropAllowedMember: string | null | undefined;
     allowedDropPositionsMember: string | null | undefined;
     getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
+    isCollapsibleMember: string | null | undefined;
+    getIsCollapsibleCallback?: (node: LTreeNode<T>) => boolean;
     shouldDisplayDebugInformation: boolean | null | undefined;
     getNodeAllowedDropPositions(node: LTreeNode<T>): DropPosition[] | null | undefined;
+    getNodeIsDraggable(node: LTreeNode<T>): boolean;
+    getNodeIsCollapsible(node: LTreeNode<T>): boolean;
     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;
+        filteredNodeCount: number;
+        isIndexing: boolean;
+        pendingIndexCount: number;
     };
     insertArray(data: T[]): InsertArrayResult<T>;
     insertTreeNode(parentPath: string, newNode: LTreeNode<T>, noEmitChanges?: boolean): string | null;
@@ -100,11 +108,7 @@ 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'): {
+    moveNode(sourcePath: string, targetPath: string, position: 'before' | 'after' | 'child'): {
         success: boolean;
         error?: string;
     };
@@ -124,7 +128,7 @@ export interface Ltree<T> {
         error?: string;
     };
     applyChanges(changes: TreeChange<T>[]): ApplyChangesResult;
-    copyNodeWithDescendants(sourceNode: LTreeNode<T>, targetParentPath: string, transformData: (data: T) => T, siblingPath?: string, position?: 'above' | 'below'): {
+    copyNodeWithDescendants(sourceNode: LTreeNode<T>, targetParentPath: string, transformData: (data: T) => T, siblingPath?: string, position?: 'before' | 'after'): {
         success: boolean;
         rootNode?: LTreeNode<T>;
         count: number;

package/dist/perf-logger.d.ts

@@ -17,7 +17,8 @@
  *   // Or set minimum threshold (only log operations slower than X ms)
  *   setPerfThreshold(10); // Only log operations taking >10ms
  */
-export declare const perfLogger: any;
+import type { Logger } from './vendor/loglevel/index.js';
+export declare const perfLogger: Logger;
 /**
  * Start a performance timer
  * @param label - Unique label for the timer

package/dist/perf-logger.js

@@ -17,9 +17,7 @@
  *   // Or set minimum threshold (only log operations slower than X ms)
  *   setPerfThreshold(10); // Only log operations taking >10ms
  */
-// @ts-ignore - Vendored library without type definitions
 import log from './vendor/loglevel/index.js';
-// @ts-ignore - Vendored library without type definitions
 import prefix from './vendor/loglevel/prefix.js';
 // Performance logger instance
 export const perfLogger = log.getLogger('LTREE:PERF');

package/dist/styles/main.scss

@@ -25,19 +25,19 @@ $tree-children-margin-top: 2px !default;
 // Drop Zone Variables
 $drop-zone-border-radius: 0 !default;
 
-// Above zone (soft sage green)
-$drop-zone-above-bg: rgba(134, 179, 152, 0.25) !default;
-$drop-zone-above-color: rgba(62, 89, 72, 0.7) !default;
-$drop-zone-above-active-bg: rgba(134, 179, 152, 0.85) !default;
-$drop-zone-above-active-color: rgb(32, 54, 40) !default;
-$drop-zone-above-active-shadow: 0 2px 12px rgba(134, 179, 152, 0.4) !default;
-
-// Below zone (soft peach/coral)
-$drop-zone-below-bg: rgba(242, 182, 158, 0.25) !default;
-$drop-zone-below-color: rgba(120, 70, 50, 0.7) !default;
-$drop-zone-below-active-bg: rgba(242, 182, 158, 0.85) !default;
-$drop-zone-below-active-color: rgb(80, 45, 30) !default;
-$drop-zone-below-active-shadow: 0 2px 12px rgba(242, 182, 158, 0.4) !default;
+// Before zone (soft sage green)
+$drop-zone-before-bg: rgba(134, 179, 152, 0.25) !default;
+$drop-zone-before-color: rgba(62, 89, 72, 0.7) !default;
+$drop-zone-before-active-bg: rgba(134, 179, 152, 0.85) !default;
+$drop-zone-before-active-color: rgb(32, 54, 40) !default;
+$drop-zone-before-active-shadow: 0 2px 12px rgba(134, 179, 152, 0.4) !default;
+
+// After zone (soft peach/coral)
+$drop-zone-after-bg: rgba(242, 182, 158, 0.25) !default;
+$drop-zone-after-color: rgba(120, 70, 50, 0.7) !default;
+$drop-zone-after-active-bg: rgba(242, 182, 158, 0.85) !default;
+$drop-zone-after-active-color: rgb(80, 45, 30) !default;
+$drop-zone-after-active-shadow: 0 2px 12px rgba(242, 182, 158, 0.4) !default;
 
 // Child zone (soft lavender)
 $drop-zone-child-bg: rgba(167, 155, 198, 0.25) !default;
@@ -47,20 +47,20 @@ $drop-zone-child-active-color: rgb(45, 38, 62) !default;
 $drop-zone-child-active-shadow: 0 2px 12px rgba(167, 155, 198, 0.4) !default;
 
 // Border glow drop indicators (for glow mode)
-$drop-glow-above-color: rgba(134, 179, 152, 0.8) !default;
-$drop-glow-below-color: rgba(242, 182, 158, 0.8) !default;
+$drop-glow-before-color: rgba(134, 179, 152, 0.8) !default;
+$drop-glow-after-color: rgba(242, 182, 158, 0.8) !default;
 $drop-glow-child-color: rgba(167, 155, 198, 0.8) !default;
 $drop-glow-child-bg: rgba(167, 155, 198, 0.15) !default;
 $drop-glow-size: 3px !default;
 
 // Drop indicator arrows (Lucide icons as data URIs)
-$drop-arrow-above: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2386b398' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 13a1 1 0 0 0-1-1H5.061a1 1 0 0 1-.75-1.811l6.836-6.835a1.207 1.207 0 0 1 1.707 0l6.835 6.835a1 1 0 0 1-.75 1.811H16a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") !default;
-$drop-arrow-below: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f2b69e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") !default;
+$drop-arrow-before: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2386b398' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 13a1 1 0 0 0-1-1H5.061a1 1 0 0 1-.75-1.811l6.836-6.835a1.207 1.207 0 0 1 1.707 0l6.835 6.835a1 1 0 0 1-.75 1.811H16a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") !default;
+$drop-arrow-after: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f2b69e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") !default;
 $drop-arrow-child: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a79bc6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H9a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M4 9v6'/%3E%3C/svg%3E") !default;
 $drop-arrow-size: 24px !default;
 $drop-arrow-position: 66% !default;
-$drop-arrow-above-rotation: 0deg !default;
-$drop-arrow-below-rotation: 0deg !default;
+$drop-arrow-before-rotation: 0deg !default;
+$drop-arrow-after-rotation: 0deg !default;
 $drop-arrow-child-rotation: 45deg !default;
 
 // Color variables for selected states and drag/drop
@@ -77,27 +77,27 @@ $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 {
+	&:not(:has(.ltree-drop-child)) .ltree-drop-before,
+	&:not(:has(.ltree-drop-after)) .ltree-drop-before,
+	&:not(:has(.ltree-drop-before)) .ltree-drop-after {
 		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 {
+	&:not(:has(.ltree-drop-child)) .ltree-drop-after,
+	&:not(:has(.ltree-drop-after)) .ltree-drop-child,
+	&:not(:has(.ltree-drop-before)) .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 {
+	&:not(:has(.ltree-drop-after)):not(:has(.ltree-drop-child)) .ltree-drop-before,
+	&:not(:has(.ltree-drop-before)):not(:has(.ltree-drop-child)) .ltree-drop-after,
+	&:not(:has(.ltree-drop-before)):not(:has(.ltree-drop-after)) .ltree-drop-child {
 		left: var(--drop-zone-start, 33%);
 		right: 0;
 		border-radius: $drop-zone-border-radius;
@@ -133,15 +133,8 @@ $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:not(.ltree-virtual-scroll),
+.ltree-tree,
 .ltree-node,
 .ltree-node-row,
 .ltree-children {
@@ -181,9 +174,9 @@ $body-color: #212529 !default;
 		}
 
 		// Border glow drop indicators (glow mode)
-		&.ltree-glow-above {
+		&.ltree-glow-before {
 			border-radius: 0 !important;
-			box-shadow: inset 0 $drop-glow-size 0 0 $drop-glow-above-color;
+			box-shadow: inset 0 $drop-glow-size 0 0 $drop-glow-before-color;
 
 			// Arrow indicator
 			&::after {
@@ -191,10 +184,10 @@ $body-color: #212529 !default;
 				position: absolute;
 				left: $drop-arrow-position;
 				top: 50%;
-				transform: translate(-50%, -50%) rotate($drop-arrow-above-rotation);
+				transform: translate(-50%, -50%) rotate($drop-arrow-before-rotation);
 				width: $drop-arrow-size;
 				height: $drop-arrow-size;
-				background-image: $drop-arrow-above;
+				background-image: $drop-arrow-before;
 				background-repeat: no-repeat;
 				background-size: contain;
 				pointer-events: none;
@@ -202,9 +195,9 @@ $body-color: #212529 !default;
 			}
 		}
 
-		&.ltree-glow-below {
+		&.ltree-glow-after {
 			border-radius: 0 !important;
-			box-shadow: inset 0 (-$drop-glow-size) 0 0 $drop-glow-below-color;
+			box-shadow: inset 0 (-$drop-glow-size) 0 0 $drop-glow-after-color;
 
 			// Arrow indicator
 			&::after {
@@ -212,10 +205,10 @@ $body-color: #212529 !default;
 				position: absolute;
 				left: $drop-arrow-position;
 				top: 50%;
-				transform: translate(-50%, -50%) rotate($drop-arrow-below-rotation);
+				transform: translate(-50%, -50%) rotate($drop-arrow-after-rotation);
 				width: $drop-arrow-size;
 				height: $drop-arrow-size;
-				background-image: $drop-arrow-below;
+				background-image: $drop-arrow-after;
 				background-repeat: no-repeat;
 				background-size: contain;
 				pointer-events: none;
@@ -616,7 +609,7 @@ $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
+// Positioning is handled by inline styles (position:fixed from Tree.svelte)
 .ltree-drop-zones {
 	pointer-events: none; // Let children handle pointer events
 	overflow: visible;
@@ -638,26 +631,26 @@ $body-color: #212529 !default;
 	border-radius: $drop-zone-border-radius;
 
 	// Above zone (green)
-	&.ltree-drop-above {
-		background: $drop-zone-above-bg;
-		color: $drop-zone-above-color;
+	&.ltree-drop-before {
+		background: $drop-zone-before-bg;
+		color: $drop-zone-before-color;
 
 		&.ltree-drop-zone-active {
-			background: $drop-zone-above-active-bg;
-			color: $drop-zone-above-active-color;
-			box-shadow: $drop-zone-above-active-shadow;
+			background: $drop-zone-before-active-bg;
+			color: $drop-zone-before-active-color;
+			box-shadow: $drop-zone-before-active-shadow;
 		}
 	}
 
 	// Below zone (yellow)
-	&.ltree-drop-below {
-		background: $drop-zone-below-bg;
-		color: $drop-zone-below-color;
+	&.ltree-drop-after {
+		background: $drop-zone-after-bg;
+		color: $drop-zone-after-color;
 
 		&.ltree-drop-zone-active {
-			background: $drop-zone-below-active-bg;
-			color: $drop-zone-below-active-color;
-			box-shadow: $drop-zone-below-active-shadow;
+			background: $drop-zone-after-active-bg;
+			color: $drop-zone-after-active-color;
+			box-shadow: $drop-zone-after-active-shadow;
 		}
 	}
 
@@ -676,7 +669,7 @@ $body-color: #212529 !default;
 
 // Layout: "around" - Above on top, Below/Child on bottom (default)
 .ltree-drop-zones-around {
-	.ltree-drop-above {
+	.ltree-drop-before {
 		top: 0;
 		left: var(--drop-zone-start, 33%);
 		right: 0;
@@ -684,7 +677,7 @@ $body-color: #212529 !default;
 		// border-radius: 4px 4px 0 0;
 	}
 
-	.ltree-drop-below {
+	.ltree-drop-after {
 		bottom: 0;
 		left: var(--drop-zone-start, 33%);
 		// Middle third of available space
@@ -703,30 +696,30 @@ $body-color: #212529 !default;
 	}
 
 	// Zone expansion: when a zone is hidden, remaining zones fill the gap
-	&:not(:has(.ltree-drop-child)) .ltree-drop-below {
+	&:not(:has(.ltree-drop-child)) .ltree-drop-after {
 		right: 0;
 	}
-	&:not(:has(.ltree-drop-below)) .ltree-drop-child {
+	&:not(:has(.ltree-drop-after)) .ltree-drop-child {
 		left: var(--drop-zone-start, 33%);
 	}
 }
 
 // Layout: "above" - All 3 zones in a row above the node
 .ltree-drop-zones-above {
-	.ltree-drop-above,
-	.ltree-drop-below,
+	.ltree-drop-before,
+	.ltree-drop-after,
 	.ltree-drop-child {
 		top: 0;
 		transform: translateY(-100%);
 	}
 
-	.ltree-drop-above {
+	.ltree-drop-before {
 		left: var(--drop-zone-start, 33%);
 		right: calc((100% - var(--drop-zone-start, 33%)) * 2 / 3);
 		border-radius: $drop-zone-border-radius 0 0 $drop-zone-border-radius;
 	}
 
-	.ltree-drop-below {
+	.ltree-drop-after {
 		left: calc(var(--drop-zone-start, 33%) + (100% - var(--drop-zone-start, 33%)) / 3);
 		right: calc((100% - var(--drop-zone-start, 33%)) / 3);
 		border-radius: 0;
@@ -744,20 +737,20 @@ $body-color: #212529 !default;
 
 // Layout: "below" - All 3 zones in a row below the node
 .ltree-drop-zones-below {
-	.ltree-drop-above,
-	.ltree-drop-below,
+	.ltree-drop-before,
+	.ltree-drop-after,
 	.ltree-drop-child {
 		bottom: 0;
 		transform: translateY(100%);
 	}
 
-	.ltree-drop-above {
+	.ltree-drop-before {
 		left: var(--drop-zone-start, 33%);
 		right: calc((100% - var(--drop-zone-start, 33%)) * 2 / 3);
 		border-radius: $drop-zone-border-radius 0 0 $drop-zone-border-radius;
 	}
 
-	.ltree-drop-below {
+	.ltree-drop-after {
 		left: calc(var(--drop-zone-start, 33%) + (100% - var(--drop-zone-start, 33%)) / 3);
 		right: calc((100% - var(--drop-zone-start, 33%)) / 3);
 		border-radius: 0;
@@ -773,10 +766,10 @@ $body-color: #212529 !default;
 	@include zone-horizontal-expansion;
 }
 
-// Layout: "wave" - Zones stacked vertically (above/child/below)
+// Layout: "wave" - Zones stacked vertically (before/child/after)
 .ltree-drop-zones-wave {
-	.ltree-drop-above,
-	.ltree-drop-below,
+	.ltree-drop-before,
+	.ltree-drop-after,
 	.ltree-drop-child {
 		left: var(--drop-zone-start, 33%);
 		right: auto;
@@ -786,7 +779,7 @@ $body-color: #212529 !default;
 		transform: none;
 	}
 
-	.ltree-drop-above {
+	.ltree-drop-before {
 		top: 0;
 		bottom: auto;
 		transform: translateY(-100%);
@@ -799,7 +792,7 @@ $body-color: #212529 !default;
 		border-radius: 0;
 	}
 
-	.ltree-drop-below {
+	.ltree-drop-after {
 		top: auto;
 		bottom: 0;
 		transform: translateY(100%);
@@ -810,8 +803,8 @@ $body-color: #212529 !default;
 // Layout: "wave2" - Diagonal wave pattern
 // Above and Below are offset 7% to the left, Child stays at dropZoneStart
 .ltree-drop-zones-wave2 {
-	.ltree-drop-above,
-	.ltree-drop-below,
+	.ltree-drop-before,
+	.ltree-drop-after,
 	.ltree-drop-child {
 		right: auto;
 		width: var(--drop-zone-max-width, 120px);
@@ -819,7 +812,7 @@ $body-color: #212529 !default;
 		height: auto;
 	}
 
-	.ltree-drop-above {
+	.ltree-drop-before {
 		left: calc(var(--drop-zone-start, 33%) - 7%);
 		top: 10%;
 		bottom: auto;
@@ -835,7 +828,7 @@ $body-color: #212529 !default;
 		border-radius: 0;
 	}
 
-	.ltree-drop-below {
+	.ltree-drop-after {
 		left: calc(var(--drop-zone-start, 33%) - 7%);
 		top: auto;
 		bottom: 10%;
@@ -856,6 +849,13 @@ $body-color: #212529 !default;
 	color: var(--ltree-body-color);
 }
 
+// Virtual scroll container
+.ltree-virtual-scroll {
+	overflow-y: auto !important;
+	overflow-x: visible;
+	overscroll-behavior: contain;
+}
+
 // Tree Container
 .ltree-container {
 	position: relative;