@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/VTree/VTreeRow.svelte

@@ -1,68 +1,50 @@
-<script lang="ts">
-  import type { VTreeFlatRow } from './VTree.models.js';
-  import type { VTreeRecord } from './types.js';
-  import type { Snippet } from 'svelte';
-
-  export interface Props<T extends VTreeRecord = VTreeRecord> {
-    row: VTreeFlatRow<T>;
-    index: number;
-    rowHeight: number;
-    indent: number;
-    isFocused: boolean;
-    isSelected: boolean;
-    getNodeLabel: (node: T) => string;
-    getNodeDescription: (node: T) => string;
-    treeDataSnapshot: T[];
-    leftSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    rightSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    onselectrow?: (index: number, event: MouseEvent) => void;
-    onrowdoubleclick?: (index: number, event: MouseEvent) => void;
-    onrowcontext?: (index: number, event: MouseEvent) => void;
-    ontogglerow?: (node: T) => void;
-  }
-
-  const {
-    row,
-    index,
-    rowHeight,
-    indent,
-    isFocused,
-    isSelected,
-    getNodeLabel,
-    getNodeDescription,
-    treeDataSnapshot,
-    leftSection,
-    rightSection,
-    onselectrow,
-    onrowdoubleclick,
-    onrowcontext,
-    ontogglerow
-  }: Props = $props();
-
-  const rowClasses = $derived(
-    [
-      'grid grid-cols-[1fr_auto] items-center select-none border-b border-surface-200-700 hover:bg-surface-100-800',
-      isFocused ? 'bg-primary-100 dark:bg-primary-900/35' : '',
-      isSelected ? 'bg-primary-200 dark:bg-primary-900/60' : ''
-    ].join(' ')
-  );
-
-  const sectionArgs = $derived({
-    node: row.node,
-    level: row.level,
-    rowIndex: index,
-    treeData: treeDataSnapshot
-  });
+<script lang="ts">import { isImageLikeValue, mergeClasses } from "./VTree.utils.js";
+const { row, index, rowHeight, autoMeasure = false, indent, isFocused, isSelected, multiple = false, selectionMode = "modifier", isChecked = false, iconValue, icon, showRowSeparator = true, hoverEffect = true, classes, getNodeLabel, getNodeDescription, treeDataSnapshot, leftSection, rightSection, onselectrow, oncheckboxselect, onrowdoubleclick, onrowcontext, ontogglerow, onrowlongpress, onrowhover, onrowhoverend, longPressDelay = 500, longPressMoveTolerance = 10 } = $props();
+const DEFAULT_CLASSES = {
+	row: "grid grid-cols-[1fr_auto] items-center select-none",
+	rowSeparator: "border-b border-surface-200-700",
+	rowFocused: "bg-primary-100 dark:bg-primary-900/35",
+	rowSelected: "bg-primary-200 dark:bg-primary-900/60",
+	rowHover: "hover:bg-surface-100-800",
+	expandIcon: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-surface-700-200-token hover:bg-surface-200-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+	indentGuide: "min-w-0 flex items-center gap-1.5 pr-2 text-surface-900-100-token",
+	label: "truncate text-sm",
+	description: "truncate text-xs text-surface-500-400-token",
+	iconWrapper: "inline-flex h-5 w-5 shrink-0 items-center justify-center text-sm"
+};
+let longPressTimer;
+let startX = 0;
+let startY = 0;
+let suppressNextClick = false;
+const sectionArgs = $derived({
+	node: row.node,
+	level: row.level,
+	rowIndex: index,
+	treeData: treeDataSnapshot
+});
+const rowClasses = $derived([
+	mergeClasses(DEFAULT_CLASSES.row, classes?.row),
+	showRowSeparator ? mergeClasses(DEFAULT_CLASSES.rowSeparator, classes?.rowSeparator) : "",
+	hoverEffect ? mergeClasses(DEFAULT_CLASSES.rowHover, classes?.rowHover) : "",
+	isFocused ? mergeClasses(DEFAULT_CLASSES.rowFocused, classes?.rowFocused) : "",
+	isSelected ? mergeClasses(DEFAULT_CLASSES.rowSelected, classes?.rowSelected) : ""
+].filter(Boolean).join(" "));
+function cancelLongPress() {
+	clearTimeout(longPressTimer);
+	longPressTimer = undefined;
+}
+function handlePointerDown(event) {
+	startX = event.clientX;
+	startY = event.clientY;
+	cancelLongPress();
+	longPressTimer = setTimeout(() => {
+		suppressNextClick = true;
+		onrowlongpress?.(index, event);
+	}, longPressDelay);
+}
+function handlePointerMove(event) {
+	if (Math.hypot(event.clientX - startX, event.clientY - startY) > longPressMoveTolerance) cancelLongPress();
+}
 </script>
 
 <div
@@ -72,65 +54,45 @@
   aria-expanded={row.hasChildren ? row.expanded : undefined}
   aria-selected={isSelected}
   tabindex="-1"
-  style={`height: ${rowHeight}px;`}
-  onclick={(event) => onselectrow?.(index, event)}
-  ondblclick={(event) => onrowdoubleclick?.(index, event)}
-  oncontextmenu={(event) => {
-    event.stopPropagation();
-    onrowcontext?.(index, event);
-  }}
-  onkeydown={(event) => {
-    if (event.key !== 'Enter' && event.key !== ' ') return;
-    event.preventDefault();
-    onselectrow?.(index, new MouseEvent('click'));
-    if (row.hasChildren) {
-      ontogglerow?.(row.node);
-    }
+  style={autoMeasure ? `min-height: ${rowHeight}px;` : `height: ${rowHeight}px;`}
+  onclick={(event) => {
+    if (suppressNextClick) { suppressNextClick = false; return; }
+    onselectrow?.(index, event);
   }}
+  ondblclick={(event) => onrowdoubleclick?.(index, event)}
+  oncontextmenu={(event) => { event.stopPropagation(); onrowcontext?.(index, event); }}
+  onkeydown={() => undefined}
+  onpointerdown={handlePointerDown}
+  onpointermove={handlePointerMove}
+  onpointerup={cancelLongPress}
+  onpointercancel={cancelLongPress}
+  onpointerenter={(event) => onrowhover?.(index, event)}
+  onpointerleave={(event) => { cancelLongPress(); onrowhoverend?.(index, event); }}
 >
-  <div
-    class="min-w-0 flex items-center gap-1.5 pr-2 text-surface-900-100-token"
-    style={`padding-left: ${(row.level - 1) * indent}px;`}
-  >
+  <div class={mergeClasses(DEFAULT_CLASSES.indentGuide, classes?.indentGuide)} style={`padding-left: ${(row.level - 1) * indent}px;`}>
     {#if leftSection}
-      <span class="inline-flex shrink-0 items-center">{@render leftSection(sectionArgs)}</span>
+      <span class="inline-flex shrink-0 items-center">
+        {@render leftSection(sectionArgs)}
+      </span>
     {/if}
-
     {#if row.hasChildren}
-      <button
-        class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-surface-700-200-token hover:bg-surface-200-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
-        type="button"
-        aria-label={row.expanded ? 'Collapse node' : 'Expand node'}
-        onclick={(event) => {
-          event.stopPropagation();
-          ontogglerow?.(row.node);
-        }}
-      >
-        {#if row.loading}
-          <span
-            class="h-3 w-3 animate-spin rounded-full border-2 border-surface-400/30 border-t-surface-700 dark:border-surface-300/30 dark:border-t-surface-100"
-            aria-hidden="true"
-          ></span>
-        {:else}
-          {row.expanded ? '▾' : '▸'}
-        {/if}
+      <button class={mergeClasses(DEFAULT_CLASSES.expandIcon, classes?.expandIcon)} type="button" aria-label={row.expanded ? 'Collapse node' : 'Expand node'} onclick={(event) => { event.stopPropagation(); ontogglerow?.(row.node); }}>
+        {#if row.loading}<span class="h-3 w-3 animate-spin rounded-full border-2 border-surface-400/30 border-t-surface-700 dark:border-surface-300/30 dark:border-t-surface-100" aria-hidden="true"></span>{:else}{row.expanded ? '▾' : '▸'}{/if}
       </button>
-    {:else}
-      <span class="inline-flex h-5 w-5 shrink-0" aria-hidden="true"></span>
+    {:else}<span class="inline-flex h-5 w-5 shrink-0" aria-hidden="true"></span>{/if}
+    {#if multiple && selectionMode === 'checkbox'}
+      <input class="h-4 w-4 shrink-0" type="checkbox" checked={isChecked} aria-label={`Select ${getNodeLabel(row.node)}`} onclick={(event) => { event.stopPropagation(); oncheckboxselect?.(index, event); }} />
     {/if}
-
-    <span class="truncate text-sm" class:font-semibold={row.matched}>{getNodeLabel(row.node)}</span>
-    {#if getNodeDescription(row.node)}
-      <span class="truncate text-xs text-surface-500-400-token">{getNodeDescription(row.node)}</span>
+    {#if icon}
+      <span class={mergeClasses(DEFAULT_CLASSES.iconWrapper, classes?.iconWrapper)}>{@render icon(sectionArgs)}</span>
+    {:else if iconValue !== undefined && iconValue !== null && iconValue !== ''}
+      <span class={mergeClasses(DEFAULT_CLASSES.iconWrapper, classes?.iconWrapper)}>{#if isImageLikeValue(iconValue)}<img class="h-4 w-4 object-contain" src={String(iconValue)} alt="" />{:else}{String(iconValue)}{/if}</span>
     {/if}
+    <span class={mergeClasses(DEFAULT_CLASSES.label, classes?.label)} class:font-semibold={row.matched}>{getNodeLabel(row.node)}</span>
+    {#if getNodeDescription(row.node)}<span class={mergeClasses(DEFAULT_CLASSES.description, classes?.description)}>{getNodeDescription(row.node)}</span>{/if}
   </div>
-
   <div class="flex items-center gap-2 pr-2">
-    {#if row.error}
-      <span class="text-xs text-error-500">{row.error}</span>
-    {/if}
-    {#if rightSection}
-      <span class="inline-flex items-center">{@render rightSection(sectionArgs)}</span>
-    {/if}
+    {#if row.error}<span class="text-xs text-error-500">{row.error}</span>{/if}
+    {#if rightSection}<span class="inline-flex items-center">{@render rightSection(sectionArgs)}</span>{/if}
   </div>
 </div>

package/dist/components/VTree/VTreeRow.svelte.d.ts

@@ -1,36 +1,52 @@
-import type { VTreeFlatRow } from './VTree.models.js';
-import type { VTreeRecord } from './types.js';
 import type { Snippet } from 'svelte';
+import type { VTreeFlatRow } from './VTree.models.js';
+import type { VTreeClassOverrides, VTreeRecord } from './types.js';
 export interface Props<T extends VTreeRecord = VTreeRecord> {
     row: VTreeFlatRow<T>;
     index: number;
     rowHeight: number;
+    autoMeasure?: boolean;
     indent: number;
     isFocused: boolean;
     isSelected: boolean;
+    multiple?: boolean;
+    selectionMode?: 'modifier' | 'checkbox';
+    isChecked?: boolean;
+    iconValue?: unknown;
+    icon?: Snippet<[{
+        node: T;
+        level: number;
+        rowIndex: number;
+        treeData: T[];
+    }]>;
+    showRowSeparator?: boolean;
+    hoverEffect?: boolean;
+    classes?: VTreeClassOverrides;
     getNodeLabel: (node: T) => string;
     getNodeDescription: (node: T) => string;
     treeDataSnapshot: T[];
-    leftSection?: Snippet<[
-        {
-            node: T;
-            level: number;
-            rowIndex: number;
-            treeData: T[];
-        }
-    ]>;
-    rightSection?: Snippet<[
-        {
-            node: T;
-            level: number;
-            rowIndex: number;
-            treeData: T[];
-        }
-    ]>;
+    leftSection?: Snippet<[{
+        node: T;
+        level: number;
+        rowIndex: number;
+        treeData: T[];
+    }]>;
+    rightSection?: Snippet<[{
+        node: T;
+        level: number;
+        rowIndex: number;
+        treeData: T[];
+    }]>;
     onselectrow?: (index: number, event: MouseEvent) => void;
+    oncheckboxselect?: (index: number, event: MouseEvent) => void;
     onrowdoubleclick?: (index: number, event: MouseEvent) => void;
     onrowcontext?: (index: number, event: MouseEvent) => void;
     ontogglerow?: (node: T) => void;
+    onrowlongpress?: (index: number, event: PointerEvent) => void;
+    onrowhover?: (index: number, event: PointerEvent) => void;
+    onrowhoverend?: (index: number, event: PointerEvent) => void;
+    longPressDelay?: number;
+    longPressMoveTolerance?: number;
 }
 declare const VTreeRow: import("svelte").Component<Props<VTreeRecord>, {}, "">;
 type VTreeRow = ReturnType<typeof VTreeRow>;

package/dist/components/VTree/VTreeSearch.svelte

@@ -1,16 +1,9 @@
-<script lang="ts">
-  export interface Props {
-    value: string;
-    placeholder?: string;
-    oninputvalue?: (value: string) => void;
-  }
-
-  const { value, placeholder = 'Search tree...', oninputvalue }: Props = $props();
-
-  function handleInput(event: Event) {
-    const target = event.currentTarget as HTMLInputElement;
-    oninputvalue?.(target.value);
-  }
+<script lang="ts">const { value, placeholder = "Search tree...", oninputvalue } = $props();
+function handleInput(event) {
+	const target = event.currentTarget;
+	oninputvalue?.(target.value);
+}
+export {};
 </script>
 
 <div class="flex">

package/dist/components/VTree/VTreeVirtualViewport.svelte

@@ -1,154 +1,65 @@
-<script lang="ts">
-  import { createVirtualizer, type SvelteVirtualizer } from '@tanstack/svelte-virtual';
-  import type { Snippet } from 'svelte';
-  import VTreeRow from './VTreeRow.svelte';
-  import type { VTreeFlatRow } from './VTree.models.js';
-  import type { VTreeRecord } from './types.js';
-
-  export interface Props<T extends VTreeRecord = VTreeRecord> {
-    rows: VTreeFlatRow<T>[];
-    rowHeight: number;
-    height: string | number;
-    indent: number;
-    overscan: number;
-    focusedIndex: number;
-    selectedId: string | null;
-    loadingRoot: boolean;
-    loadingMessage: string;
-    emptyMessage: string;
-    getNodeLabel: (node: T) => string;
-    getNodeDescription: (node: T) => string;
-    treeDataSnapshot: T[];
-    leftSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    rightSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    onselectrow?: (index: number, event: MouseEvent) => void;
-    onrowdoubleclick?: (index: number, event: MouseEvent) => void;
-    onrowcontext?: (index: number, event: MouseEvent) => void;
-    onviewportcontext?: (event: MouseEvent) => void;
-    ontogglerow?: (node: T) => void;
-    ontreekeydown?: (event: KeyboardEvent) => void;
-  }
-
-  const {
-    rows,
-    rowHeight,
-    height,
-    indent,
-    overscan,
-    focusedIndex,
-    selectedId,
-    loadingRoot,
-    loadingMessage,
-    emptyMessage,
-    getNodeLabel,
-    getNodeDescription,
-    treeDataSnapshot,
-    leftSection,
-    rightSection,
-    onselectrow,
-    onrowdoubleclick,
-    onrowcontext,
-    onviewportcontext,
-    ontogglerow,
-    ontreekeydown
-  }: Props = $props();
-
-  let viewportRef = $state<HTMLDivElement | null>(null);
-  let virtualizerInstance = $state<SvelteVirtualizer<HTMLDivElement, HTMLDivElement> | null>(null);
-
-  function toCssSize(value: string | number): string {
-    return typeof value === 'number' ? `${value}px` : value;
-  }
-
-  export function scrollToIndex(index: number) {
-    virtualizerInstance?.scrollToIndex(index, { align: 'auto' });
-  }
-
-  $effect(() => {
-    if (!viewportRef) {
-      virtualizerInstance = null;
-      return;
-    }
-
-    const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-      count: rows.length,
-      estimateSize: () => rowHeight,
-      overscan,
-      getScrollElement: () => viewportRef
-    });
-
-    return virtualizer.subscribe((instance) => {
-      virtualizerInstance = instance;
-    });
-  });
-
-  $effect(() => {
-    if (!virtualizerInstance || !viewportRef) return;
-    virtualizerInstance.setOptions({
-      count: rows.length,
-      estimateSize: () => rowHeight,
-      overscan,
-      getScrollElement: () => viewportRef
-    });
-  });
-
-  const virtualItems = $derived(virtualizerInstance?.getVirtualItems() ?? []);
-  const totalSize = $derived(virtualizerInstance?.getTotalSize() ?? 0);
+<script lang="ts">import { createVirtualizer } from "@tanstack/svelte-virtual";
+import VTreeRow from "./VTreeRow.svelte";
+import { resolveRowHeight } from "./VTree.utils.js";
+const { rows, rowHeight, autoMeasure = false, height, indent, overscan, focusedIndex, selectedId, selectedNodeId, selectedItemIds = [], loadingRoot, loadingMessage, emptyMessage, multiple = false, selectionMode = "modifier", iconField, icon, classes, showRowSeparator = true, hoverEffect = true, getNodeLabel, getNodeDescription, treeDataSnapshot, leftSection, rightSection, onselectrow, oncheckboxselect, onrowdoubleclick, onrowcontext, onviewportcontext, ontogglerow, onrowlongpress, onrowhover, onrowhoverend, longPressDelay, longPressMoveTolerance, ontreekeydown } = $props();
+let viewportRef = $state(null);
+let virtualizerInstance = $state(null);
+function toCssSize(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+function estimate(index) {
+	const row = rows[index];
+	return resolveRowHeight(rowHeight, row?.node, row?.level ?? 1, index);
+}
+export function scrollToIndex(index) {
+	virtualizerInstance?.scrollToIndex(index, { align: "auto" });
+}
+function measure(node) {
+	if (autoMeasure) virtualizerInstance?.measureElement(node);
+}
+$effect(() => {
+	if (!viewportRef) {
+		virtualizerInstance = null;
+		return;
+	}
+	const virtualizer = createVirtualizer({
+		count: rows.length,
+		estimateSize: estimate,
+		overscan,
+		getScrollElement: () => viewportRef
+	});
+	return virtualizer.subscribe((instance) => {
+		virtualizerInstance = instance;
+	});
+});
+$effect(() => {
+	if (!virtualizerInstance || !viewportRef) return;
+	virtualizerInstance.setOptions({
+		count: rows.length,
+		estimateSize: estimate,
+		overscan,
+		getScrollElement: () => viewportRef
+	});
+});
+const virtualItems = $derived(virtualizerInstance?.getVirtualItems() ?? []);
+const totalSize = $derived(virtualizerInstance?.getTotalSize() ?? 0);
 </script>
 
-<div
-  class="card overflow-auto border border-surface-300-700 bg-surface-50-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
-  bind:this={viewportRef}
-  style={`height: ${toCssSize(height)};`}
-  onkeydown={(event) => ontreekeydown?.(event)}
-  oncontextmenu={(event) => onviewportcontext?.(event)}
-  tabindex="0"
-  role="tree"
-  aria-label="Virtual tree"
->
+<div class="card overflow-auto border border-surface-300-700 bg-surface-50-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500" bind:this={viewportRef} style={`height: ${toCssSize(height)};`} onkeydown={(event) => ontreekeydown?.(event)} oncontextmenu={(event) => onviewportcontext?.(event)} tabindex="0" role="tree" aria-label="Virtual tree">
   {#if loadingRoot}
     <div class="grid min-h-24 place-items-center px-3 text-sm text-surface-500-400-token">{loadingMessage}</div>
   {:else if rows.length === 0}
     <div class="grid min-h-24 place-items-center px-3 text-sm text-surface-500-400-token">{emptyMessage}</div>
   {:else}
     <div class="relative w-full" style={`height: ${totalSize}px;`}>
-      <div
-        class="absolute left-0 top-0 w-full"
-        style={`transform: translateY(${virtualItems[0]?.start ?? 0}px);`}
-      >
-        {#each virtualItems as item (item.key)}
-          {@const row = rows[item.index]}
-          {#if row}
-            <VTreeRow
-              row={row}
-              index={item.index}
-              {rowHeight}
-              {indent}
-              isFocused={item.index === focusedIndex}
-              isSelected={row.id === selectedId}
-              {getNodeLabel}
-              {getNodeDescription}
-              {treeDataSnapshot}
-              {leftSection}
-              {rightSection}
-              {onselectrow}
-              {onrowdoubleclick}
-              {onrowcontext}
-              {ontogglerow}
-            />
-          {/if}
-        {/each}
-      </div>
+      {#each virtualItems as item (item.key)}
+        {@const row = rows[item.index]}
+        {#if row}
+          <div class="absolute left-0 top-0 w-full" style={`transform: translateY(${item.start}px);`} {@attach measure}>
+            <VTreeRow row={row} index={item.index} rowHeight={estimate(item.index)} {autoMeasure} {indent} isFocused={item.index === focusedIndex} isSelected={row.id === (selectedNodeId || selectedId)} {multiple} {selectionMode} isChecked={selectedItemIds.includes(row.id)} iconValue={iconField ? row.node[iconField] : undefined} {icon} {classes} {showRowSeparator} {hoverEffect} {getNodeLabel} {getNodeDescription} {treeDataSnapshot} {leftSection} {rightSection} {onselectrow} {oncheckboxselect} {onrowdoubleclick} {onrowcontext} {ontogglerow} {onrowlongpress} {onrowhover} {onrowhoverend} {longPressDelay} {longPressMoveTolerance} />
+          </div>
+        {/if}
+      {/each}
     </div>
   {/if}
 </div>

package/dist/components/VTree/VTreeVirtualViewport.svelte.d.ts

@@ -1,41 +1,58 @@
 import type { Snippet } from 'svelte';
 import type { VTreeFlatRow } from './VTree.models.js';
-import type { VTreeRecord } from './types.js';
+import type { VTreeClassOverrides, VTreeRecord } from './types.js';
 export interface Props<T extends VTreeRecord = VTreeRecord> {
     rows: VTreeFlatRow<T>[];
-    rowHeight: number;
+    rowHeight: number | ((node: T, level: number, index: number) => number);
+    autoMeasure?: boolean;
     height: string | number;
     indent: number;
     overscan: number;
     focusedIndex: number;
     selectedId: string | null;
+    selectedNodeId?: string;
+    selectedItemIds?: string[];
     loadingRoot: boolean;
     loadingMessage: string;
     emptyMessage: string;
+    multiple?: boolean;
+    selectionMode?: 'modifier' | 'checkbox';
+    iconField?: keyof T & string;
+    icon?: Snippet<[{
+        node: T;
+        level: number;
+        rowIndex: number;
+        treeData: T[];
+    }]>;
+    classes?: VTreeClassOverrides;
+    showRowSeparator?: boolean;
+    hoverEffect?: boolean;
     getNodeLabel: (node: T) => string;
     getNodeDescription: (node: T) => string;
     treeDataSnapshot: T[];
-    leftSection?: Snippet<[
-        {
-            node: T;
-            level: number;
-            rowIndex: number;
-            treeData: T[];
-        }
-    ]>;
-    rightSection?: Snippet<[
-        {
-            node: T;
-            level: number;
-            rowIndex: number;
-            treeData: T[];
-        }
-    ]>;
+    leftSection?: Snippet<[{
+        node: T;
+        level: number;
+        rowIndex: number;
+        treeData: T[];
+    }]>;
+    rightSection?: Snippet<[{
+        node: T;
+        level: number;
+        rowIndex: number;
+        treeData: T[];
+    }]>;
     onselectrow?: (index: number, event: MouseEvent) => void;
+    oncheckboxselect?: (index: number, event: MouseEvent) => void;
     onrowdoubleclick?: (index: number, event: MouseEvent) => void;
     onrowcontext?: (index: number, event: MouseEvent) => void;
     onviewportcontext?: (event: MouseEvent) => void;
     ontogglerow?: (node: T) => void;
+    onrowlongpress?: (index: number, event: PointerEvent) => void;
+    onrowhover?: (index: number, event: PointerEvent) => void;
+    onrowhoverend?: (index: number, event: PointerEvent) => void;
+    longPressDelay?: number;
+    longPressMoveTolerance?: number;
     ontreekeydown?: (event: KeyboardEvent) => void;
 }
 declare const VTreeVirtualViewport: import("svelte").Component<Props<VTreeRecord>, {

package/dist/components/VTree/types.d.ts

@@ -45,7 +45,8 @@ export interface VTreeProps<T extends VTreeRecord = VTreeRecord> {
     childrenField?: keyof T & string;
     hasChildrenField?: keyof T & string;
     height?: number | string;
-    rowHeight?: number;
+    rowHeight?: number | ((node: T, level: number, index: number) => number);
+    autoMeasure?: boolean;
     indent?: number;
     overscan?: number;
     searchable?: boolean;
@@ -80,4 +81,41 @@ export interface VTreeProps<T extends VTreeRecord = VTreeRecord> {
     ontoggle?: (node: T, expanded: boolean) => void;
     onsearch?: (query: string) => void;
     onloaderror?: (error: unknown, node?: T) => void;
+    iconField?: keyof T & string;
+    icon?: Snippet<[{
+        node: T;
+        level: number;
+        rowIndex: number;
+        treeData: T[];
+    }]>;
+    classes?: VTreeClassOverrides;
+    showRowSeparator?: boolean;
+    hoverEffect?: boolean;
+    /** Controlled single-selection. Undefined means uncontrolled; null means explicitly empty. */
+    selected?: T | null;
+    /** Enables selectedItems/onSelectedItemsChange multi-selection. */
+    multiple?: boolean;
+    selectionMode?: 'modifier' | 'checkbox';
+    onSelectedChange?: (node: T | null) => void;
+    selectedItems?: T[];
+    onSelectedItemsChange?: (items: T[]) => void;
+    onsingleclick?: (node: T, treeData: T[], event: MouseEvent) => void;
+    singleClickDelay?: number;
+    onlongpress?: (node: T, treeData: T[], event: PointerEvent) => void;
+    longPressDelay?: number;
+    longPressMoveTolerance?: number;
+    onrowhover?: (node: T, treeData: T[], rowIndex: number, event: PointerEvent) => void;
+    onrowhoverend?: (node: T, treeData: T[], rowIndex: number, event: PointerEvent) => void;
+}
+export interface VTreeClassOverrides {
+    row?: string;
+    rowSeparator?: string;
+    rowFocused?: string;
+    rowSelected?: string;
+    rowHover?: string;
+    expandIcon?: string;
+    indentGuide?: string;
+    label?: string;
+    description?: string;
+    iconWrapper?: string;
 }