@keenmate/svelte-treeview 5.0.0-rc09 → 5.0.0-rc10

package/CHANGELOG.md

@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.0.0-rc10] - 2026-06-10
+
+### Changed
+- **CSS custom properties rescoped from `:root` to `.ltree-container`**: All `--ltree-*` declarations now live on the tree's root element instead of the document root. This mirrors the `:host`-scoped pattern from `@keenmate/web-multiselect` / `web-daterangepicker` and is the only way `--base-*` theming actually works at subtree scope. Previously, a wrapper around the tree that set `--base-accent-color: red` had no effect because `--ltree-primary`'s `var(--base-accent-color, ...)` substitution was frozen at `:root`. With the new scope, the substitution recomputes on `.ltree-container` (a descendant of the wrapper), and `--base-*` set on any ancestor flows through correctly. Multiple trees on the same page can now be themed differently via subtree wrappers.
+
+  **Consumer migration**: setting `--ltree-*` on a wrapper element (e.g., `.my-theme { --ltree-primary: red }`) no longer cascades into the tree, because `.ltree-container` has its own direct rule for every `--ltree-*` token. To theme a subtree, prefer `--base-accent-color` (and the rest of the `--base-*` taxonomy) on the wrapper — every primary-derived tint follows via the existing `color-mix()` chains. To override an `--ltree-*` directly, target `.ltree-container`: `.my-wrap .ltree-container { --ltree-primary: red }`.
+
+### Added
+- **`--ltree-bg` CSS variable**: The tree's `.ltree-container` now paints its own default background (`var(--base-main-bg, light-dark(#ffffff, #1a1a1a))`) so consumers don't need to wrap the tree in a colored container for a visible surface. The dark-mode CSS flips `--ltree-bg` alongside the other surface tokens. Set `--ltree-bg: transparent` to restore the pre-rc10 layered behavior.
+- **Built-in dark mode with belt-and-suspenders coverage**: New `dark-mode.css` partial in an `@layer overrides;` cascade catches all four signals — OS preference via `@media (prefers-color-scheme: dark)`, framework theme classes (`[data-theme="dark"]`, `[data-bs-theme="dark"]`, `.dark`), per-instance opt-in via the new `theme` prop on `<Tree>`, and symmetric `light` selectors so a single tree can be forced back to light on a dark page. Every `--ltree-*` color variable's fallback now uses `light-dark(<light>, <dark>)` so consumers who declare `html { color-scheme: light dark }` get OS-aware behavior automatically with zero JavaScript.
+- **`theme` prop on `<Tree>`**: `'dark' | 'light' | null | undefined`. Forwards to the root `.ltree-container` as `data-theme`, where the stylesheet's per-instance selectors (`.ltree-container[data-theme="dark"]`) take over. Leave `undefined` to inherit from the page (OS, framework class, etc.).
+- **`--ltree-elevated-bg`, `--tree-ghost-shadow` CSS variables**: `elevated-bg` reads through the canonical `--base-elevated-bg` chain for surfaces above the main background (currently feeds the context-menu chain); `tree-ghost-shadow` replaces a hardcoded `rgba(0,0,0,0.3)` literal in the touch drag ghost so consumers can recolor or remove the shadow.
+- **`getIsDropAllowedCallback` prop + `getNodeIsDropAllowed(node)` method**: Callback variant for the existing `isDropAllowedMember` data-field prop, matching the pattern rc09 introduced for `getIsExpandedCallback` / `getIsSelectableCallback` / `getIsSelectedCallback`. Seeded at `insertArray` time. Precedence: callback > member > default. Additionally, `getIsDraggableCallback` is now actually applied during the seed walk (the prop existed in rc09 but inert at insert-time — only consumed lazily in some paths). Precedence: callback > member > default for both.
+
+### Changed
+- **CSS file layout aligned with the Bliss web-component guidelines**: All `_<partial>.css` renamed to `<partial>.css` (the underscore was a legacy SASS convention and these are plain CSS modules). `main.css` now declares `@layer variables, component, overrides;` and wraps every `@import` in `layer(...)` — consumers' unlayered overrides automatically beat every rule in the library, no `!important` needed. New canonical Tier-2 stubs (`controls.css`, `floating.css`, `animations.css`) added even where empty, so the file set is identical across the KeenMate component suite. `@keyframes bounce` and `@keyframes ltree-spin` moved into `animations.css`.
+- **Loading overlay background adapts to theme**: `--ltree-loading-bg` no longer hardcodes `rgba(255, 255, 255, 0.8)`; it now composes 80% of `--base-main-bg` against the page so the semi-transparent overlay reads correctly on both light and dark surfaces.
+- **`component-variables.manifest.json` extended**: `base-elevated-bg` added to the `baseVariables` list; `ltree-elevated-bg` and `tree-ghost-shadow` added to `componentVariables`. The manifest now stays in sync with the new variable surface.
+
+### Fixed
+- **Virtual scroll stuck at bottom after filter shrinks the tree**: When the user scrolled down and then typed a search filter, `visibleFlatNodes` collapsed and `vsTotalHeight` shrank below the previous scroll position. The browser silently clamped the container's actual `scrollTop`, but the controller's `vsScrollTop` state kept its stale large value — so `vsStartIndex` fell out of range, `flatNodesToRender` was empty, and the scrollbar appeared frozen near the bottom with no content rendered. A new `$effect` now reacts to `vsTotalHeight` and clamps both `vsScrollTop` and the container's `scrollTop` to the new max whenever content shrinks below the current scroll position.
+- **Double-click expand silently broken in `clickBehavior='select'` mode**: The browser's native `dblclick` event never fired because the first click triggered focus → `_setFocusedNode` bumped `node._rev` → the flat-mode `{#each}` destroyed and recreated the row, so the second click landed on a different DOM element and the browser refused to synthesize a `dblclick`. The controller now detects double-clicks manually (`_lastSelectClickPath` / `_lastSelectClickTime`, 400 ms threshold) so a rapid second click on the same node toggles its expand state regardless of re-render. Node-level `_onNodeDblClicked` removed (it could double-toggle if the browser ever did fire `dblclick`).
+
 ## [5.0.0-rc09] - 2026-06-07
 
 ### Added

package/README.md

@@ -6,6 +6,16 @@ A high-performance, feature-rich hierarchical tree view component for Svelte 5 w
 
 Browse interactive code examples and the full API reference at **[svelte-treeview.keenmate.dev](https://svelte-treeview.keenmate.dev)**
 
+## What's New in v5.0.0-rc10
+
+- **Built-in dark mode covering all four signals**: A new `dark-mode.css` partial flips the tree's surface, text, border, and accent palette when any of the canonical signals is active — OS preference (`prefers-color-scheme: dark`), page `<html style="color-scheme: dark">` resolved via `light-dark()`, framework theme classes (`[data-theme="dark"]`, `[data-bs-theme="dark"]`, `.dark`), and the new per-instance `theme` prop. Symmetric `light` selectors let a single tree force light on an otherwise-dark page. Zero JavaScript — pure CSS resolution.
+- **`theme` prop on `<Tree>`**: `'dark' | 'light' | null | undefined`. Forwarded to the root `.ltree-container` as `data-theme`, where per-instance CSS selectors take over and beat ambient signals. Leave `undefined` to inherit from the page.
+- **CSS variables rescoped from `:root` to `.ltree-container`**: Mirrors the `:host`-scoped pattern from sibling `@keenmate/*` components and is the only way `--base-*` theming actually works at subtree scope. A wrapper around the tree that sets `--base-accent-color: red` now re-tints the tree (it previously had no effect because the substitution was frozen at `:root`). Multiple trees on the same page can be themed differently via wrapper-scoped `--base-*` overrides. Consumer note: setting `--ltree-*` directly on a wrapper no longer cascades — use `--base-*` on the wrapper or target `.ltree-container` explicitly.
+- **`--ltree-bg` — the tree paints its own surface**: `.ltree-container` gets a `background: var(--ltree-bg)` so consumers don't need to wrap the tree in a colored container for a visible surface. Override to `transparent` to restore the pre-rc10 layered behavior. Companion `--ltree-elevated-bg` reads through the `--base-elevated-bg` chain for floating chrome (context menu).
+- **CSS file layout aligned with the Bliss web-component guidelines**: All `_xxx.css` partials renamed to `xxx.css`, `main.css` now declares `@layer variables, component, overrides;` and imports each partial into the matching layer. Consumers' unlayered overrides automatically beat every rule in the library — no `!important` needed. Note: if your app ships an unlayered universal CSS reset (`* { padding: 0 }` from normalize / Bootstrap / Tailwind preflight / etc.), wrap it in a low-priority `@layer reset` or the tree's defaults won't apply.
+- **`getIsDropAllowedCallback` prop + `getIsDraggableCallback` seeded at insert-time**: Callback variant for `isDropAllowedMember`, matching the pattern rc09 introduced for `getIsExpandedCallback` / `getIsSelectableCallback` / `getIsSelectedCallback`. Also, the existing `getIsDraggableCallback` prop is now actually applied during the seed walk — previously it was only consumed lazily in some paths.
+- **Bug fixes**: Virtual scroll no longer gets stuck at bottom after a filter shrinks the tree. Double-click to expand in `clickBehavior='select'` mode finally works (the browser's native `dblclick` event couldn't fire because the first click destroyed the row via the focus re-render; the controller now detects the double manually).
+
 ## What's New in v5.0.0-rc09
 
 - **Three-level selection model**: New `selectionMode: 'single' | 'multi'` prop (default `'single'`) cleanly separates the **focused** node (cursor), the **highlighted** set (Ctrl/Shift+click range), and **selected** checkboxes. When `showCheckboxes` is off, highlight mirrors into `selectedPaths` automatically — so consumers always have a single "what's selected" set to read regardless of UI style. Programmatic `highlightNode` / `highlightNodes` / `clearHighlight` respect `{ silent: true }`.
@@ -18,13 +28,6 @@ Browse interactive code examples and the full API reference at **[svelte-treevie
 
 > **Breaking changes** in this release include the `selectionMode='single'` default (Ctrl/Shift+click no longer auto-multi-selects without opt-in), `selectedPaths` becoming populated in no-checkbox trees (mirrored from highlight), removal of `lastHighlightedPath` / `isHighlightAnchor` / `--ltree-*-rgb` / SCSS variable overrides, and `--ltree-node-indent-per-level` now scaling with `--ltree-rem` instead of document `rem`. See CHANGELOG for migration notes.
 
-## What's New in v5.0.0-rc08
-
-- **`{ silent: true }` on highlight/selection methods**: Update tree state from URL params or other external sources without firing `onNodeClick` / `onHighlightChange` / `onSelectionChange` — perfect for deep links where you don't want the change callback to re-trigger your form loader. Applies to `highlightNode`, `highlightNodes`, `clearHighlight`, and `deselectAll`.
-- **Array variants for expand/collapse**: `expandNodes`, `collapseNodes`, `expandAll`, and `collapseAll` now take `string | string[]`. Open or close several places in one call.
-- **Exclusive focus mode**: Pass `{ exclusive: true }` to `expandNodes` / `expandAll` to open the target path and collapse everything else in a single pass — no two-step flicker compared to `collapseAll() + expandNodes(path)`.
-- **`noEmit` option for batching**: Suppress the change emit on individual expand/collapse calls when chaining several operations; emit once at the end.
-
 ## v5.0: Core/Renderer Split + Virtual Scroll
 
 > [!IMPORTANT]

package/component-variables.manifest.json

@@ -6,7 +6,8 @@
 		{ "name": "base-accent-color", "required": true, "usage": "Primary accent — selection, drop-zones, focus rings, debug panel. Tints derived via color-mix()." },
 		{ "name": "base-success-color", "required": false, "usage": "Drop-valid border and dragover highlight" },
 		{ "name": "base-danger-color", "required": false, "usage": "Drop-invalid border, danger context-menu items, scroll-highlight arrows" },
-		{ "name": "base-main-bg", "required": false, "usage": "Used for --ltree-light (context-menu hover tint, debug stat chips)" },
+		{ "name": "base-main-bg", "required": false, "usage": "Used for --ltree-light (context-menu hover tint, debug stat chips). Light fallback uses light-dark() for OS-aware dark mode." },
+		{ "name": "base-elevated-bg", "required": false, "usage": "Elevated surface for context-menu (via dropdown chain) and --ltree-elevated-bg. Light fallback uses light-dark()." },
 		{ "name": "base-border-color", "required": true, "usage": "Default border color (checkbox, context-menu, spinner track)" },
 		{ "name": "base-hover-bg", "required": false, "usage": "Node row hover background" },
 		{ "name": "base-text-color-1", "required": true, "usage": "Primary body text color (node labels, context-menu items)" },
@@ -28,8 +29,9 @@
 		{ "name": "ltree-primary", "category": "color", "usage": "Primary accent color (selection, focus, links). Tints derived via color-mix()." },
 		{ "name": "ltree-success", "category": "color", "usage": "Success color (drop-valid border, dragover-highlight)" },
 		{ "name": "ltree-danger", "category": "color", "usage": "Danger color (drop-invalid, scroll-highlight arrows, danger menu items)" },
-		{ "name": "ltree-light", "category": "color", "usage": "Light surface (context-menu hover, debug stat chips)" },
-		{ "name": "ltree-border", "category": "color", "usage": "Default border color" },
+		{ "name": "ltree-light", "category": "color", "usage": "Light surface (context-menu hover, debug stat chips). Light-dark-aware via fallback chain." },
+		{ "name": "ltree-elevated-bg", "category": "surface", "usage": "Elevated surface used as the default context-menu background (chains through --base-elevated-bg)." },
+		{ "name": "ltree-border", "category": "color", "usage": "Default border color. Light-dark-aware via fallback chain." },
 		{ "name": "ltree-body-color", "category": "color", "usage": "Default body text color" },
 
 		{ "name": "ltree-font-family", "category": "typography", "usage": "Font family for all tree text" },
@@ -110,6 +112,7 @@
 
 		{ "name": "tree-ghost-bg", "category": "state", "usage": "Touch drag ghost background (legacy prefix, kept for backward compat)" },
 		{ "name": "tree-ghost-color", "category": "state", "usage": "Touch drag ghost text color (legacy prefix)" },
+		{ "name": "tree-ghost-shadow", "category": "state", "usage": "Touch drag ghost drop shadow (legacy prefix)" },
 
 		{ "name": "ltree-context-menu-bg", "category": "context-menu", "usage": "Menu background" },
 		{ "name": "ltree-context-menu-border-color", "category": "context-menu", "usage": "Menu border color" },

package/dist/components/Node.svelte

@@ -323,12 +323,12 @@
 		}
 	}
 
-	function _onNodeDblClicked(event?: MouseEvent) {
-		if (clickBehavior === 'select') {
-			// In select mode, double-click expands/collapses
-			toggleExpanded()
-		}
-	}
+	// Note: double-click in clickBehavior='select' is detected on the controller
+	// side (see _lastSelectClickPath in TreeController). The browser's native
+	// dblclick event isn't reliable here: the first click bumps node._rev for
+	// the focus update, which destroys+recreates the row in flat-mode rendering,
+	// so the browser sees the two clicks on different elements and skips the
+	// dblclick. Manual detection on the (stable) controller avoids that.
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -391,10 +391,6 @@
 				e.stopPropagation();
 				_onNodeClicked(e);
 			}}
-			ondblclick={(e) => {
-				e.stopPropagation();
-				_onNodeDblClicked(e);
-			}}
 			oncontextmenu={(e) => {
 				e.stopPropagation();
 				callbacks.onNodeRightClicked(node, e);

package/dist/components/Tree.svelte

@@ -40,6 +40,7 @@
 		isDraggableMember?: string | null | undefined;
 		getIsDraggableCallback?: (node: LTreeNode<T>) => boolean;
 		isDropAllowedMember?: string | null | undefined;
+		getIsDropAllowedCallback?: (node: LTreeNode<T>) => boolean;
 		allowedDropPositionsMember?: string | null | undefined;
 		getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
 		isCollapsibleMember?: string | null | undefined;
@@ -165,6 +166,11 @@
 		getContextMenuItemsCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void, selectedNodes?: LTreeNode<T>[]) => ContextMenuEntry[];
 
 		// VISUALS
+		/** Per-instance theme override. Forwarded to the root `.ltree-container`
+		 *  as `data-theme="dark"|"light"`, which the stylesheet uses to flip the
+		 *  tree's colors independently of the surrounding page. Leave undefined to
+		 *  inherit from the page (OS preference, framework classes, etc.). */
+		theme?: 'dark' | 'light' | null | undefined;
 		bodyClass?: string | null | undefined;
 		highlightedNodeClass?: string | null | undefined;
 		focusedNodeClass?: string | null | undefined;
@@ -205,6 +211,7 @@
 		isDraggableMember,
 		getIsDraggableCallback,
 		isDropAllowedMember,
+		getIsDropAllowedCallback,
 		allowedDropPositionsMember,
 		getAllowedDropPositionsCallback,
 		isCollapsibleMember,
@@ -299,6 +306,7 @@
 		getContextMenuItemsCallback,
 
 		// VISUALS
+		theme,
 		bodyClass,
 		expandIconClass = 'ltree-icon-expand',
 		collapseIconClass = 'ltree-icon-collapse',
@@ -316,6 +324,12 @@
 	}: Props = $props();
 
 	// ── Create controller ───────────────────────────────────────────────
+	// Each prop here captures its INITIAL value only — that's intentional. Every
+	// reactive prop is re-synced into the controller via $effect blocks below
+	// (search for "Sync props → controller"), so the controller stays in step
+	// with parent changes. The svelte-ignore suppresses the 80+ warnings the
+	// compiler would otherwise fire for each non-closure prop reference here.
+	// svelte-ignore state_referenced_locally
 	const controller = createTreeController<T>({
 		idMember,
 		pathMember,
@@ -331,6 +345,7 @@
 		isDraggableMember,
 		getIsDraggableCallback,
 		isDropAllowedMember,
+		getIsDropAllowedCallback,
 		allowedDropPositionsMember,
 		getAllowedDropPositionsCallback,
 		isCollapsibleMember,
@@ -412,7 +427,12 @@
 	});
 
 	// ── Apply navigation overrides if provided ─────────────────────────
+	// Snapshot at init only — navigation handlers aren't expected to swap mid-
+	// lifetime. Consumers passing a new object on rerender would not see it
+	// applied; if that becomes a need, hoist into an $effect.
+	// svelte-ignore state_referenced_locally
 	if (navigationOverrides) {
+		// svelte-ignore state_referenced_locally
 		controller.navigation = { ...controller.createDefaultNavigation(), ...navigationOverrides };
 	}
 
@@ -715,6 +735,7 @@
 				| "isDraggableMember"
 				| "getIsDraggableCallback"
 				| "isDropAllowedMember"
+				| "getIsDropAllowedCallback"
 				| "displayValueMember"
 				| "getDisplayValueCallback"
 				| "searchValueMember"
@@ -793,6 +814,7 @@
 		if (updates.isDraggableMember !== undefined) isDraggableMember = updates.isDraggableMember;
 		if (updates.getIsDraggableCallback !== undefined) getIsDraggableCallback = updates.getIsDraggableCallback;
 		if (updates.isDropAllowedMember !== undefined) isDropAllowedMember = updates.isDropAllowedMember;
+		if (updates.getIsDropAllowedCallback !== undefined) getIsDropAllowedCallback = updates.getIsDropAllowedCallback;
 		if (updates.displayValueMember !== undefined) displayValueMember = updates.displayValueMember;
 		if (updates.getDisplayValueCallback !== undefined) getDisplayValueCallback = updates.getDisplayValueCallback;
 		if (updates.searchValueMember !== undefined) searchValueMember = updates.searchValueMember;
@@ -959,9 +981,11 @@
 <svelte:window onkeydown={handleContextMenuKeydown} />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	class="ltree-container"
 	tabindex="0"
+	data-theme={theme}
 	bind:this={treeContainerRef}
 	onkeydown={handleTreeKeydown}
 	ondragenter={controller.handleTreeDragEnter}

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

@@ -19,6 +19,7 @@ declare function $$render<T>(): {
         isDraggableMember?: string | null | undefined;
         getIsDraggableCallback?: (node: LTreeNode<T>) => boolean;
         isDropAllowedMember?: string | null | undefined;
+        getIsDropAllowedCallback?: (node: LTreeNode<T>) => boolean;
         allowedDropPositionsMember?: string | null | undefined;
         getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
         isCollapsibleMember?: string | null | undefined;
@@ -127,6 +128,11 @@ declare function $$render<T>(): {
             position?: "child" | "before" | "after";
         } | false | void;
         getContextMenuItemsCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void, selectedNodes?: LTreeNode<T>[]) => ContextMenuEntry[];
+        /** Per-instance theme override. Forwarded to the root `.ltree-container`
+         *  as `data-theme="dark"|"light"`, which the stylesheet uses to flip the
+         *  tree's colors independently of the surrounding page. Leave undefined to
+         *  inherit from the page (OS preference, framework classes, etc.). */
+        theme?: "dark" | "light" | null | undefined;
         bodyClass?: string | null | undefined;
         highlightedNodeClass?: string | null | undefined;
         focusedNodeClass?: string | null | undefined;
@@ -240,6 +246,7 @@ declare function $$render<T>(): {
             isDraggableMember?: string | null | undefined;
             getIsDraggableCallback?: (node: LTreeNode<T>) => boolean;
             isDropAllowedMember?: string | null | undefined;
+            getIsDropAllowedCallback?: (node: LTreeNode<T>) => boolean;
             allowedDropPositionsMember?: string | null | undefined;
             getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
             isCollapsibleMember?: string | null | undefined;
@@ -348,6 +355,11 @@ declare function $$render<T>(): {
                 position?: "child" | "before" | "after";
             } | false | void;
             getContextMenuItemsCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void, selectedNodes?: LTreeNode<T>[]) => ContextMenuEntry[];
+            /** Per-instance theme override. Forwarded to the root `.ltree-container`
+             *  as `data-theme="dark"|"light"`, which the stylesheet uses to flip the
+             *  tree's colors independently of the surrounding page. Leave undefined to
+             *  inherit from the page (OS preference, framework classes, etc.). */
+            theme?: "dark" | "light" | null | undefined;
             bodyClass?: string | null | undefined;
             highlightedNodeClass?: string | null | undefined;
             focusedNodeClass?: string | null | undefined;
@@ -364,7 +376,7 @@ declare function $$render<T>(): {
             onTreeKeydown?: (event: KeyboardEvent, controller: TreeController<T>) => boolean | void;
             /** Override individual navigation methods (e.g. for custom ArrowDown/Up behavior) */
             navigationOverrides?: TreeNavigationOverrides<T>;
-        }, "treeId" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "getIsExpandedCallback" | "isSelectableMember" | "getIsSelectableCallback" | "isSelectedMember" | "getIsSelectedCallback" | "isDraggableMember" | "getIsDraggableCallback" | "isDropAllowedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "isCollapsibleMember" | "getIsCollapsibleCallback" | "orderMember" | "isSorted" | "sortCallback" | "data" | "focusedNode" | "highlightedPaths" | "selectedPaths" | "expandLevel" | "clickBehavior" | "selectionMode" | "showCheckboxes" | "checkboxMode" | "clickTogglesCheckbox" | "beforeCheckboxToggleCallback" | "rangeSelectionMode" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayDebugInformation" | "shouldDisplayContextMenuInDebugMode" | "onNodeClick" | "onHighlightChange" | "onSelectionChange" | "onNodeDragStart" | "onNodeDragOver" | "onNodeDrop" | "beforeDropCallback" | "beforeCopyCallback" | "beforeCutCallback" | "beforePasteCallback" | "getContextMenuItemsCallback" | "virtualScroll" | "virtualRowHeight" | "virtualOverscan" | "virtualContainerHeight" | "dragDropMode" | "dropZoneMode" | "bodyClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "toggleIconMode" | "highlightedNodeClass" | "focusedNodeClass" | "dragOverNodeClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset" | "accordionExpand">>) => void;
+        }, "treeId" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "getIsExpandedCallback" | "isSelectableMember" | "getIsSelectableCallback" | "isSelectedMember" | "getIsSelectedCallback" | "isDraggableMember" | "getIsDraggableCallback" | "isDropAllowedMember" | "getIsDropAllowedCallback" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "isCollapsibleMember" | "getIsCollapsibleCallback" | "orderMember" | "isSorted" | "sortCallback" | "data" | "focusedNode" | "highlightedPaths" | "selectedPaths" | "expandLevel" | "clickBehavior" | "selectionMode" | "showCheckboxes" | "checkboxMode" | "clickTogglesCheckbox" | "beforeCheckboxToggleCallback" | "rangeSelectionMode" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayDebugInformation" | "shouldDisplayContextMenuInDebugMode" | "onNodeClick" | "onHighlightChange" | "onSelectionChange" | "onNodeDragStart" | "onNodeDragOver" | "onNodeDrop" | "beforeDropCallback" | "beforeCopyCallback" | "beforeCutCallback" | "beforePasteCallback" | "getContextMenuItemsCallback" | "virtualScroll" | "virtualRowHeight" | "virtualOverscan" | "virtualContainerHeight" | "dragDropMode" | "dropZoneMode" | "bodyClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "toggleIconMode" | "highlightedNodeClass" | "focusedNodeClass" | "dragOverNodeClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset" | "accordionExpand">>) => void;
     };
     bindings: "data" | "focusedNode" | "highlightedPaths" | "selectedPaths" | "searchText" | "insertResult" | "isRendering";
     slots: {};
@@ -471,6 +483,7 @@ declare class __sveltets_Render<T> {
             isDraggableMember?: string | null | undefined;
             getIsDraggableCallback?: ((node: LTreeNode<T>) => boolean) | undefined;
             isDropAllowedMember?: string | null | undefined;
+            getIsDropAllowedCallback?: ((node: LTreeNode<T>) => boolean) | undefined;
             allowedDropPositionsMember?: string | null | undefined;
             getAllowedDropPositionsCallback?: ((node: LTreeNode<T>) => DropPosition[] | null | undefined) | undefined;
             isCollapsibleMember?: string | null | undefined;
@@ -579,6 +592,11 @@ declare class __sveltets_Render<T> {
                 position?: "child" | "before" | "after";
             }) | undefined;
             getContextMenuItemsCallback?: ((node: LTreeNode<T>, closeMenuCallback: () => void, selectedNodes?: LTreeNode<T>[] | undefined) => ContextMenuEntry[]) | undefined;
+            /** Per-instance theme override. Forwarded to the root `.ltree-container`
+             *  as `data-theme="dark"|"light"`, which the stylesheet uses to flip the
+             *  tree's colors independently of the surrounding page. Leave undefined to
+             *  inherit from the page (OS preference, framework classes, etc.). */
+            theme?: "dark" | "light" | null | undefined;
             bodyClass?: string | null | undefined;
             highlightedNodeClass?: string | null | undefined;
             focusedNodeClass?: string | null | undefined;
@@ -595,7 +613,7 @@ declare class __sveltets_Render<T> {
             onTreeKeydown?: ((event: KeyboardEvent, controller: TreeController<T>) => boolean | void) | undefined;
             /** Override individual navigation methods (e.g. for custom ArrowDown/Up behavior) */
             navigationOverrides?: Partial<import("../core/navigation.js").TreeNavigation<T>> | undefined;
-        }, "treeId" | "data" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "getIsExpandedCallback" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "orderMember" | "isSorted" | "sortCallback" | "isSelectableMember" | "getIsSelectableCallback" | "isSelectedMember" | "getIsSelectedCallback" | "isDraggableMember" | "getIsDraggableCallback" | "isDropAllowedMember" | "isCollapsibleMember" | "getIsCollapsibleCallback" | "shouldDisplayDebugInformation" | "onNodeDrop" | "beforeDropCallback" | "beforeCopyCallback" | "beforeCutCallback" | "beforePasteCallback" | "beforeCheckboxToggleCallback" | "getContextMenuItemsCallback" | "focusedNode" | "highlightedPaths" | "selectedPaths" | "expandLevel" | "clickBehavior" | "selectionMode" | "showCheckboxes" | "checkboxMode" | "clickTogglesCheckbox" | "rangeSelectionMode" | "initializeIndexCallback" | "searchText" | "shouldUseInternalSearchIndex" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayContextMenuInDebugMode" | "virtualScroll" | "virtualRowHeight" | "virtualOverscan" | "virtualContainerHeight" | "dragDropMode" | "dropZoneMode" | "accordionExpand" | "onNodeClick" | "onNodeDragStart" | "onNodeDragOver" | "onHighlightChange" | "onSelectionChange" | "bodyClass" | "highlightedNodeClass" | "focusedNodeClass" | "dragOverNodeClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "toggleIconMode" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
+        }, "treeId" | "data" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "getIsExpandedCallback" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "orderMember" | "isSorted" | "sortCallback" | "isSelectableMember" | "getIsSelectableCallback" | "isSelectedMember" | "getIsSelectedCallback" | "isDraggableMember" | "getIsDraggableCallback" | "isDropAllowedMember" | "getIsDropAllowedCallback" | "isCollapsibleMember" | "getIsCollapsibleCallback" | "shouldDisplayDebugInformation" | "onNodeDrop" | "beforeDropCallback" | "beforeCopyCallback" | "beforeCutCallback" | "beforePasteCallback" | "beforeCheckboxToggleCallback" | "getContextMenuItemsCallback" | "focusedNode" | "highlightedPaths" | "selectedPaths" | "expandLevel" | "clickBehavior" | "selectionMode" | "showCheckboxes" | "checkboxMode" | "clickTogglesCheckbox" | "rangeSelectionMode" | "initializeIndexCallback" | "searchText" | "shouldUseInternalSearchIndex" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayContextMenuInDebugMode" | "virtualScroll" | "virtualRowHeight" | "virtualOverscan" | "virtualContainerHeight" | "dragDropMode" | "dropZoneMode" | "accordionExpand" | "onNodeClick" | "onNodeDragStart" | "onNodeDragOver" | "onHighlightChange" | "onSelectionChange" | "bodyClass" | "highlightedNodeClass" | "focusedNodeClass" | "dragOverNodeClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "toggleIconMode" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
     };
 }
 interface $$IsomorphicComponent {

package/dist/components/TreeProvider.svelte

@@ -12,6 +12,7 @@
 		...controllerProps
 	}: Props = $props();
 
+	// svelte-ignore state_referenced_locally
 	const controller = createTreeController<T>(controllerProps as TreeControllerProps<T>);
 
 	// Set contexts that Node.svelte expects

package/dist/constants.generated.d.ts

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

package/dist/core/TreeController.svelte.d.ts

@@ -67,6 +67,7 @@ export interface TreeControllerProps<T> {
     isDraggableMember?: string | null | undefined;
     getIsDraggableCallback?: (node: LTreeNode<T>) => boolean;
     isDropAllowedMember?: string | null | undefined;
+    getIsDropAllowedCallback?: (node: LTreeNode<T>) => boolean;
     allowedDropPositionsMember?: string | null | undefined;
     getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
     isCollapsibleMember?: string | null | undefined;
@@ -199,6 +200,14 @@ export declare class TreeController<T> {
      *  from the focused node. Set on first Shift action, advances on subsequent
      *  Shift actions, cleared on any plain navigation. Not exposed via props. */
     private _shiftCursor;
+    /** Manual double-click detection state for clickBehavior='select'. We can't
+     *  rely on the browser's native dblclick event in this mode because the first
+     *  click triggers focus → _setFocusedNode bumps node._rev → flat-mode {#each}
+     *  destroys and recreates the row, so the second click lands on a different
+     *  DOM element and the browser refuses to synthesize a dblclick. Tracking
+     *  the click on the controller (which survives the re-render) sidesteps that. */
+    private _lastSelectClickPath;
+    private _lastSelectClickTime;
     selectedPaths: Set<string>;
     insertResult: InsertArrayResult<T> | null | undefined;
     searchText: string | null | undefined;
@@ -430,6 +439,8 @@ export declare class TreeController<T> {
     getNodeAllowedDropPositions(node: LTreeNode<T>): DropPosition[] | null;
     /** Get whether a node is draggable (proxies LTree resolution: callback > member > node property). */
     getNodeIsDraggable(node: LTreeNode<T>): boolean;
+    /** Get whether a node accepts drops (proxies LTree resolution: callback > member > node property). */
+    getNodeIsDropAllowed(node: LTreeNode<T>): boolean;
     /** Get whether a node is collapsible (proxies LTree resolution: callback > member > node property). */
     getNodeIsCollapsible(node: LTreeNode<T>): boolean;
     /** Calculate drop position from cursor location within an element (before/after/child).

package/dist/core/TreeController.svelte.js

@@ -46,6 +46,14 @@ export class TreeController {
      *  from the focused node. Set on first Shift action, advances on subsequent
      *  Shift actions, cleared on any plain navigation. Not exposed via props. */
     _shiftCursor = null;
+    /** Manual double-click detection state for clickBehavior='select'. We can't
+     *  rely on the browser's native dblclick event in this mode because the first
+     *  click triggers focus → _setFocusedNode bumps node._rev → flat-mode {#each}
+     *  destroys and recreates the row, so the second click lands on a different
+     *  DOM element and the browser refuses to synthesize a dblclick. Tracking
+     *  the click on the controller (which survives the re-render) sidesteps that. */
+    _lastSelectClickPath = null;
+    _lastSelectClickTime = 0;
     selectedPaths = $state.raw(new Set());
     insertResult = $state.raw(null);
     searchText = $state(undefined);
@@ -257,7 +265,7 @@ export class TreeController {
         this.onRenderCompleteHandler = props.onRenderComplete;
         // ── Create LTree ────────────────────────────────────────────────
         // svelte-ignore non_reactive_update
-        this.tree = createLTree(props.idMember, props.pathMember, props.parentPathMember, props.levelMember, props.hasChildrenMember, props.isExpandedMember, props.getIsExpandedCallback, props.isSelectableMember, props.getIsSelectableCallback, props.isSelectedMember, props.getIsSelectedCallback, props.isDraggableMember, props.getIsDraggableCallback, props.isDropAllowedMember, props.allowedDropPositionsMember, props.displayValueMember, props.getDisplayValueCallback, props.searchValueMember, props.getSearchValueCallback, props.getAllowedDropPositionsCallback, props.isCollapsibleMember, props.getIsCollapsibleCallback, props.orderMember, this.treeId, this.treePathSeparator, props.expandLevel, props.shouldUseInternalSearchIndex, props.initializeIndexCallback, props.indexerBatchSize, props.indexerTimeout, {
+        this.tree = createLTree(props.idMember, props.pathMember, props.parentPathMember, props.levelMember, props.hasChildrenMember, props.isExpandedMember, props.getIsExpandedCallback, props.isSelectableMember, props.getIsSelectableCallback, props.isSelectedMember, props.getIsSelectedCallback, props.isDraggableMember, props.getIsDraggableCallback, props.isDropAllowedMember, props.getIsDropAllowedCallback, props.allowedDropPositionsMember, props.displayValueMember, props.getDisplayValueCallback, props.searchValueMember, props.getSearchValueCallback, props.getAllowedDropPositionsCallback, props.isCollapsibleMember, props.getIsCollapsibleCallback, props.orderMember, this.treeId, this.treePathSeparator, props.expandLevel, props.shouldUseInternalSearchIndex, props.initializeIndexCallback, props.indexerBatchSize, props.indexerTimeout, {
             shouldDisplayDebugInformation: props.shouldDisplayDebugInformation,
             isSorted: props.isSorted,
             sortCallback: props.sortCallback
@@ -460,6 +468,22 @@ export class TreeController {
                 }
             });
         });
+        // Virtual scroll: clamp scroll position when content shrinks (e.g. after filter)
+        // Without this, vsScrollTop stays at its old (large) value while vsTotalHeight
+        // drops, so vsStartIndex falls out of range and the rendered slice is empty —
+        // the scroll appears stuck because the browser silently clamps the container's
+        // actual scrollTop but our derived state never re-reads it.
+        $effect(() => {
+            if (!this.vsActive || !this.vsContainerRef)
+                return;
+            const maxScrollTop = Math.max(0, this.vsTotalHeight - this.vsContainerRef.clientHeight);
+            if (this.vsScrollTop > maxScrollTop) {
+                this.vsScrollTop = maxScrollTop;
+                if (this.vsContainerRef.scrollTop > maxScrollTop) {
+                    this.vsContainerRef.scrollTop = maxScrollTop;
+                }
+            }
+        });
         // Context menu global event listeners
         $effect(() => {
             if (this.contextMenuVisible) {
@@ -1093,7 +1117,11 @@ export class TreeController {
     }
     /** Get whether a node is draggable (proxies LTree resolution: callback > member > node property). */
     getNodeIsDraggable(node) {
-        return this.tree?.getNodeIsDraggable(node) ?? true;
+        return this.tree?.getNodeIsDraggable(node) ?? false;
+    }
+    /** Get whether a node accepts drops (proxies LTree resolution: callback > member > node property). */
+    getNodeIsDropAllowed(node) {
+        return this.tree?.getNodeIsDropAllowed(node) ?? false;
     }
     /** Get whether a node is collapsible (proxies LTree resolution: callback > member > node property). */
     getNodeIsCollapsible(node) {
@@ -1365,6 +1393,32 @@ export class TreeController {
         if (this.contextMenuVisible) {
             this.closeContextMenu();
         }
+        // Manual dblclick detection for clickBehavior='select' — see the comment
+        // on _lastSelectClickPath for why the browser's native dblclick can't be
+        // trusted in this mode. Threshold matches Windows' default double-click
+        // interval (500ms is the system default; we use a slightly tighter 400ms
+        // to avoid coupling unrelated clicks).
+        if (this.clickBehavior === 'select' && !modifiers?.ctrl && !modifiers?.shift) {
+            const now = Date.now();
+            const isDouble = this._lastSelectClickPath === node.path &&
+                now - this._lastSelectClickTime < 400;
+            if (isDouble) {
+                this._lastSelectClickPath = null;
+                this._lastSelectClickTime = 0;
+                const canonical = this.tree.getNodeByPath(node.path) ?? node;
+                if (canonical.hasChildren && canonical.isCollapsible !== false) {
+                    if (canonical.isExpanded) {
+                        this.collapseNodes(canonical.path);
+                    }
+                    else {
+                        this.expandNodes(canonical.path);
+                    }
+                }
+                return;
+            }
+            this._lastSelectClickPath = node.path;
+            this._lastSelectClickTime = now;
+        }
         // In single mode, mouse Ctrl/Shift+click degrade to plain click. Programmatic
         // callers (highlightNode with mode='toggle'/'range') pass forceMultiSemantics
         // to opt out of the gate — the API contract should not depend on selectionMode.
@@ -1943,6 +1997,11 @@ export class TreeController {
         // selectable (preserves prior highlight state for unselectable rows).
         if (node.isSelectable && !this.highlightedPaths.has(node.path)) {
             requestAnimationFrame(() => {
+                // Esc-cancel can fire dragend before this rAF runs, leaving the source
+                // node "stuck" highlighted after a cancelled drag. Bail if the drag is
+                // no longer in progress.
+                if (!this.isDragInProgress)
+                    return;
                 this._clearAllHighlightFlags();
                 node.isHighlighted = true;
                 node._rev = (node._rev || 0) + 1;

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

@@ -15,9 +15,9 @@ export function createLTreeNode(data) {
         children: {},
         hasChildren: false,
         data: undefined,
-        isDraggable: true,
+        isDraggable: false,
         isCollapsible: true,
-        isDropAllowed: true,
+        isDropAllowed: false,
         allowedDropPositions: undefined,
         visualState: VisualState.notSelected,
         isExpanded: 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, _getIsExpandedCallback?: (node: LTreeNode<T>) => boolean, _isSelectableMember?: string | null | undefined, _getIsSelectableCallback?: (node: LTreeNode<T>) => boolean, _isSelectedMember?: string | null | undefined, _getIsSelectedCallback?: (node: LTreeNode<T>) => boolean, _isDraggableMember?: string | null | undefined, _getIsDraggableCallback?: (node: LTreeNode<T>) => boolean, _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.js').DropPosition[] | null | undefined, _isCollapsibleMember?: string | null | undefined, _getIsCollapsibleCallback?: (node: LTreeNode<T>) => boolean, _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, _getIsExpandedCallback?: (node: LTreeNode<T>) => boolean, _isSelectableMember?: string | null | undefined, _getIsSelectableCallback?: (node: LTreeNode<T>) => boolean, _isSelectedMember?: string | null | undefined, _getIsSelectedCallback?: (node: LTreeNode<T>) => boolean, _isDraggableMember?: string | null | undefined, _getIsDraggableCallback?: (node: LTreeNode<T>) => boolean, _isDropAllowedMember?: string | null | undefined, _getIsDropAllowedCallback?: (node: LTreeNode<T>) => boolean, _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.js').DropPosition[] | null | undefined, _isCollapsibleMember?: string | null | undefined, _getIsCollapsibleCallback?: (node: LTreeNode<T>) => boolean, _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

@@ -9,7 +9,7 @@ import { perfStart, perfEnd, perfSummary } from '../perf-logger.js';
 function getField(item, member) {
     return item[member];
 }
-export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMember, _hasChildrenMember, _isExpandedMember, _getIsExpandedCallback, _isSelectableMember, _getIsSelectableCallback, _isSelectedMember, _getIsSelectedCallback, _isDraggableMember, _getIsDraggableCallback, _isDropAllowedMember, _allowedDropPositionsMember, _displayValueMember, _getDisplayValueCallback, _searchValueMember, _getSearchValueCallback, _getAllowedDropPositionsCallback, _isCollapsibleMember, _getIsCollapsibleCallback, _orderMember, _treeId, _treePathSeparator, _expandLevel, _shouldUseInternalSearchIndex, _initializeIndexCallback, _indexerBatchSize, _indexerTimeout, opts) {
+export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMember, _hasChildrenMember, _isExpandedMember, _getIsExpandedCallback, _isSelectableMember, _getIsSelectableCallback, _isSelectedMember, _getIsSelectedCallback, _isDraggableMember, _getIsDraggableCallback, _isDropAllowedMember, _getIsDropAllowedCallback, _allowedDropPositionsMember, _displayValueMember, _getDisplayValueCallback, _searchValueMember, _getSearchValueCallback, _getAllowedDropPositionsCallback, _isCollapsibleMember, _getIsCollapsibleCallback, _orderMember, _treeId, _treePathSeparator, _expandLevel, _shouldUseInternalSearchIndex, _initializeIndexCallback, _indexerBatchSize, _indexerTimeout, opts) {
     let shouldCalculateParentPath = isEmptyString(_parentPathMember);
     let shouldCalculateLevel = isEmptyString(_levelMember);
     let shouldCalculateHasChildren = isEmptyString(_hasChildrenMember);
@@ -76,6 +76,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
         isDraggableMember: _isDraggableMember,
         getIsDraggableCallback: _getIsDraggableCallback,
         isDropAllowedMember: _isDropAllowedMember,
+        getIsDropAllowedCallback: _getIsDropAllowedCallback,
         allowedDropPositionsMember: _allowedDropPositionsMember,
         hasChildrenMember: _hasChildrenMember,
         displayValueMember: _displayValueMember,
@@ -213,11 +214,15 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     node.isSelected = _getIsSelectedCallback(node);
                 else if (!shouldCalculateIsSelected)
                     node.isSelected = getField(row, _isSelectedMember);
-                if (!shouldCalculateIsDraggable)
+                if (_getIsDraggableCallback)
+                    node.isDraggable = _getIsDraggableCallback(node);
+                else if (!shouldCalculateIsDraggable)
                     node.isDraggable = getField(row, _isDraggableMember);
                 if (!shouldCalculateIsCollapsible)
                     node.isCollapsible = getField(row, _isCollapsibleMember);
-                if (!shouldCalculateIsDropAllowed)
+                if (_getIsDropAllowedCallback)
+                    node.isDropAllowed = _getIsDropAllowedCallback(node);
+                else if (!shouldCalculateIsDropAllowed)
                     node.isDropAllowed = getField(row, _isDropAllowedMember);
                 if (!shouldCalculateAllowedDropPositions)
                     node.allowedDropPositions = getField(row, _allowedDropPositionsMember);
@@ -707,6 +712,13 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 return getField(node.data, _isDraggableMember);
             return node.isDraggable;
         },
+        getNodeIsDropAllowed(node) {
+            if (this.getIsDropAllowedCallback)
+                return this.getIsDropAllowedCallback(node);
+            if (!shouldCalculateIsDropAllowed && node.data)
+                return getField(node.data, _isDropAllowedMember);
+            return node.isDropAllowed;
+        },
         getNodeIsCollapsible(node) {
             if (this.getIsCollapsibleCallback)
                 return this.getIsCollapsibleCallback(node);
@@ -1339,11 +1351,15 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                     node.isSelected = _getIsSelectedCallback(node);
                 else if (!shouldCalculateIsSelected)
                     node.isSelected = getField(row, _isSelectedMember);
-                if (!shouldCalculateIsDraggable)
+                if (_getIsDraggableCallback)
+                    node.isDraggable = _getIsDraggableCallback(node);
+                else if (!shouldCalculateIsDraggable)
                     node.isDraggable = getField(row, _isDraggableMember);
                 if (!shouldCalculateIsCollapsible)
                     node.isCollapsible = getField(row, _isCollapsibleMember);
-                if (!shouldCalculateIsDropAllowed)
+                if (_getIsDropAllowedCallback)
+                    node.isDropAllowed = _getIsDropAllowedCallback(node);
+                else if (!shouldCalculateIsDropAllowed)
                     node.isDropAllowed = getField(row, _isDropAllowedMember);
                 if (!shouldCalculateAllowedDropPositions)
                     node.allowedDropPositions = getField(row, _allowedDropPositionsMember);

package/dist/ltree/types.d.ts

@@ -97,6 +97,7 @@ export interface Ltree<T> {
     isDraggableMember: string | null | undefined;
     getIsDraggableCallback?: (node: LTreeNode<T>) => boolean;
     isDropAllowedMember: string | null | undefined;
+    getIsDropAllowedCallback?: (node: LTreeNode<T>) => boolean;
     allowedDropPositionsMember: string | null | undefined;
     getAllowedDropPositionsCallback?: (node: LTreeNode<T>) => DropPosition[] | null | undefined;
     isCollapsibleMember: string | null | undefined;
@@ -104,6 +105,7 @@ export interface Ltree<T> {
     shouldDisplayDebugInformation: boolean | null | undefined;
     getNodeAllowedDropPositions(node: LTreeNode<T>): DropPosition[] | null | undefined;
     getNodeIsDraggable(node: LTreeNode<T>): boolean;
+    getNodeIsDropAllowed(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) */

package/dist/styles/animations.css

@@ -0,0 +1,17 @@
+/* =============================================================================
+   @keyframes — all animation declarations live here.
+   ============================================================================= */
+
+/* Loading spinner (used by .ltree-loading-spinner in loading.css). */
+@keyframes ltree-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* Drop-arrow bounce indicator (used by drag-drop.css drop-arrow pseudo-elements). */
+@keyframes bounce {
+	0%, 20%, 50%, 80%, 100% { transform: translateY(-50%); }
+	40% { transform: translateY(-60%); }
+	60% { transform: translateY(-40%); }
+}