@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/tree/tree.svelte

@@ -1,453 +1,307 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Composite root that renders a hierarchical tree of tree-item nodes with keyboard navigation and selection state.
-   * @tag tree
-   * @tag hierarchy
-   * @useWhen Presenting hierarchical data such as a file system, organization, or nested categories.
-   * @useWhen Coordinating single- or multi-select state across all descendant tree-items via the selectionMode prop.
-   * @avoidWhen Disclosing flat sibling sections — use accordion instead.
-   * @avoidWhen Switching between sibling views of the same region — use tabs instead.
-   * @related tree-item, accordion
-   */
-  export type {
-    TreeFilterPredicate,
-    TreeProps,
-    TreeRef,
-    TreeSelectionBehavior,
-    TreeSelectionMode,
-    TreeVirtualizedItemRenderState,
-  } from './tree.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import { tick, untrack } from 'svelte';
-  import { SvelteSet } from 'svelte/reactivity';
-  import type { TreeProps, TreeRef } from './tree.types.ts';
-
-  import type { TreeContext } from '../../_internal/tree-context.ts';
-  import { setTreeContext, setTreeItemParentContext } from '../../_internal/tree-context.ts';
-  import {
-    descendantTreeDataIds,
-    flattenTreeDataItems,
-    visibleTreeDataItems,
-    type FlattenedTreeDataItem,
-  } from '../../_internal/tree-data.ts';
-  import { TreeDragController } from '../../_internal/tree-drag-controller.svelte.ts';
-  import type { TreeVisibilityPredicate } from '../../_internal/tree-registry.svelte.ts';
-  import { TreeRegistry } from '../../_internal/tree-registry.svelte.ts';
-  import { TreeVirtualizer } from '../../_internal/use-virtualizer.svelte.ts';
-  import type { VirtualItem } from '../../_internal/virtual-item.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import {
-    findTypeaheadMatch,
-    isTypeaheadKey,
-    TypeaheadBuffer,
-  } from '../../utilities/typeahead.ts';
-  import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
-  import {
-    deselectIds,
-    selectIds,
-    selectionStateFor,
-    toggleIndependentId,
-    toggleSelectionScope,
-  } from './tree-selection.ts';
-
-  // ---------------------------------------------------------------------------
-  // Props
-  // ---------------------------------------------------------------------------
-
-  let {
-    selectionMode = 'none',
-    checkboxSelection = false,
-    selectionBehavior = 'independent',
-    selectedIds = $bindable([]),
-    expandedIds = $bindable([]),
-    ref = $bindable<TreeRef | undefined>(),
-    items,
-    virtualized = false,
-    virtualizationEstimatedRowHeight = 36,
-    virtualizationOverscan = 4,
-    virtualizationHeight = '20rem',
-    virtualizedItem,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    disableTypeahead = false,
-    id: idAttribute,
-    class: className,
-    style: styleAttribute,
-    selectionControls,
-    filterValue,
-    onfilterchange,
-    filterPlaceholder = 'Search tree',
-    showSearch = false,
-    filterPredicate = defaultFilterPredicate,
-    onreorder,
-    children,
-    ...rest
-  }: TreeProps = $props();
-
-  const generatedId = $props.id();
-
-  function normalizeOptionalText(value: string | undefined): string | undefined {
+import { tick, untrack } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
+import { setTreeContext, setTreeItemParentContext } from '../../_internal/tree-context.ts';
+import { descendantTreeDataIds, flattenTreeDataItems, visibleTreeDataItems, } from '../../_internal/tree-data.ts';
+import { TreeDragController } from '../../_internal/tree-drag-controller.svelte.ts';
+import { TreeRegistry } from '../../_internal/tree-registry.svelte.ts';
+import { TreeVirtualizer } from '../../_internal/use-virtualizer.svelte.ts';
+import { classNames } from '../../utilities/class-names.ts';
+import { devWarn } from '../../utilities/dev-warn.ts';
+import { findTypeaheadMatch, isTypeaheadKey, TypeaheadBuffer, } from '../../utilities/typeahead.ts';
+import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
+import { deselectIds, selectIds, selectionStateFor, toggleIndependentId, toggleSelectionScope, } from './tree-selection.ts';
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+let { selectionMode = 'none', checkboxSelection = false, selectionBehavior = 'independent', selectedIds = $bindable([]), expandedIds = $bindable([]), ref = $bindable(), items, virtualized = false, virtualizationEstimatedRowHeight = 36, virtualizationOverscan = 4, virtualizationHeight = '20rem', virtualizedItem, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, disableTypeahead = false, id: idAttribute, class: className, style: styleAttribute, selectionControls, filterValue, onfilterchange, filterPlaceholder = 'Search tree', showSearch = false, filterPredicate = defaultFilterPredicate, onreorder, children, ...rest } = $props();
+const generatedId = $props.id();
+function normalizeOptionalText(value) {
     const trimmedValue = value?.trim();
     return trimmedValue ? trimmedValue : undefined;
-  }
-
-  function defaultFilterPredicate(label: string, _id: string, query: string): boolean {
+}
+function defaultFilterPredicate(label, _id, query) {
     return label.toLowerCase().includes(query.toLowerCase());
-  }
-
-  // ---------------------------------------------------------------------------
-  // State
-  // ---------------------------------------------------------------------------
-
-  const registry = new TreeRegistry();
-  let focusedId = $state<string | null>(null);
-  let treeElement = $state<HTMLElement | null>(null);
-  let filterInputElement = $state<HTMLInputElement | null>(null);
-  let uncontrolledFilterValue = $state(untrack(() => filterValue ?? ''));
-  let filterStatusAnnouncement = $state('');
-  let filterStatusAnnouncementSequence = $state(0);
-  let filterStatusBusy = $state(false);
-  let filterStatusTimer: ReturnType<typeof setTimeout> | null = null;
-  let expansionAnnouncement = $state('');
-  let expansionAnnouncementSequence = $state(0);
-  let dragAnnouncement = $state('');
-  let dragAnnouncementSequence = $state(0);
-  let dragController: TreeDragController | null = $state(null);
-  let latestDragPointerX = 0;
-  let latestDragPointerY = 0;
-  let dragScrollElement: HTMLElement | null = null;
-  let dragScrollAnimationFrame: number | null = null;
-
-  // Anchor for shift-select range
-  let selectionAnchorId = $state<string | null>(null);
-
-  const typeaheadBuffer = new TypeaheadBuffer();
-
-  // Warn once when no accessible label is provided
-  let hasWarnedNoLabel = false;
-  let hasWarnedVirtualizedChildren = false;
-  let hasWarnedVirtualizedWithoutItems = false;
-
-  const resolvedAriaLabel = $derived(normalizeOptionalText(ariaLabel));
-  const resolvedAriaLabelledBy = $derived(normalizeOptionalText(ariaLabelledBy));
-  const resolvedFilterPlaceholder = $derived(
-    normalizeOptionalText(filterPlaceholder) ?? 'Search tree',
-  );
-
-  $effect(() => {
+}
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+const registry = new TreeRegistry();
+let focusedId = $state(null);
+let treeElement = $state(null);
+let filterInputElement = $state(null);
+let uncontrolledFilterValue = $state(untrack(() => filterValue ?? ''));
+let filterStatusAnnouncement = $state('');
+let filterStatusAnnouncementSequence = $state(0);
+let filterStatusBusy = $state(false);
+let filterStatusTimer = null;
+let expansionAnnouncement = $state('');
+let expansionAnnouncementSequence = $state(0);
+let dragAnnouncement = $state('');
+let dragAnnouncementSequence = $state(0);
+let dragController = $state(null);
+let latestDragPointerX = 0;
+let latestDragPointerY = 0;
+let dragScrollElement = null;
+let dragScrollAnimationFrame = null;
+// Anchor for shift-select range
+let selectionAnchorId = $state(null);
+const typeaheadBuffer = new TypeaheadBuffer();
+// Warn once when no accessible label is provided
+let hasWarnedNoLabel = false;
+let hasWarnedVirtualizedChildren = false;
+let hasWarnedVirtualizedWithoutItems = false;
+const resolvedAriaLabel = $derived(normalizeOptionalText(ariaLabel));
+const resolvedAriaLabelledBy = $derived(normalizeOptionalText(ariaLabelledBy));
+const resolvedFilterPlaceholder = $derived(normalizeOptionalText(filterPlaceholder) ?? 'Search tree');
+$effect(() => {
     if (!resolvedAriaLabel && !resolvedAriaLabelledBy && !hasWarnedNoLabel) {
-      hasWarnedNoLabel = true;
-      devWarn('[cinder-tree] Tree requires either aria-label or aria-labelledby.');
+        hasWarnedNoLabel = true;
+        devWarn('[cinder-tree] Tree requires either aria-label or aria-labelledby.');
     }
-  });
-
-  $effect(() => {
+});
+$effect(() => {
     if (virtualized && children && !hasWarnedVirtualizedChildren) {
-      hasWarnedVirtualizedChildren = true;
-      devWarn(
-        '[cinder-tree] virtualized Tree uses the items prop; child snippets are ignored while virtualized is true.',
-      );
+        hasWarnedVirtualizedChildren = true;
+        devWarn('[cinder-tree] virtualized Tree uses the items prop; child snippets are ignored while virtualized is true.');
     }
-
     if (virtualized && !items && !hasWarnedVirtualizedWithoutItems) {
-      hasWarnedVirtualizedWithoutItems = true;
-      devWarn('[cinder-tree] virtualized Tree requires the items prop.');
+        hasWarnedVirtualizedWithoutItems = true;
+        devWarn('[cinder-tree] virtualized Tree requires the items prop.');
     }
-  });
-
-  // Clear typeahead timer on unmount
-  $effect(() => {
+});
+// Clear typeahead timer on unmount
+$effect(() => {
     return () => {
-      typeaheadBuffer.reset();
-      if (filterStatusTimer !== null) {
-        clearTimeout(filterStatusTimer);
-        filterStatusTimer = null;
-      }
-      stopDragAutoscroll();
+        typeaheadBuffer.reset();
+        if (filterStatusTimer !== null) {
+            clearTimeout(filterStatusTimer);
+            filterStatusTimer = null;
+        }
+        stopDragAutoscroll();
     };
-  });
-
-  // ---------------------------------------------------------------------------
-  // Derived visible list
-  // ---------------------------------------------------------------------------
-
-  const isFilterControlled = $derived(filterValue !== undefined);
-  const currentFilterValue = $derived(
-    isFilterControlled ? (filterValue ?? '') : uncontrolledFilterValue,
-  );
-  const normalizedFilterValue = $derived(currentFilterValue.trim());
-  const filtering = $derived(normalizedFilterValue.length > 0);
-  const treeId = $derived(idAttribute ?? `${generatedId}-tree`);
-  const filterInputId = $derived(`${generatedId}-filter`);
-  const dragInstructionsId = $derived(`${generatedId}-drag-instructions`);
-  const isVirtualizedTree = $derived(virtualized && items != null);
-  const flattenedDataItems = $derived.by(() => flattenTreeDataItems(items ?? []));
-  const flattenedDataItemById = $derived.by(
-    () => new Map(flattenedDataItems.map((item) => [item.id, item])),
-  );
-  const hasTreeChrome = $derived(
-    selectionControls != null || showSearch || filtering || onreorder != null,
-  );
-  const hasRegisteredItems = $derived(
-    isVirtualizedTree ? flattenedDataItems.length > 0 : registry.size > 0,
-  );
-  const activeVisibilityPredicate = $derived.by<TreeVisibilityPredicate | undefined>(() => {
-    if (!filtering) return undefined;
+});
+// ---------------------------------------------------------------------------
+// Derived visible list
+// ---------------------------------------------------------------------------
+const isFilterControlled = $derived(filterValue !== undefined);
+const currentFilterValue = $derived(isFilterControlled ? (filterValue ?? '') : uncontrolledFilterValue);
+const normalizedFilterValue = $derived(currentFilterValue.trim());
+const filtering = $derived(normalizedFilterValue.length > 0);
+const treeId = $derived(idAttribute ?? `${generatedId}-tree`);
+const filterInputId = $derived(`${generatedId}-filter`);
+const dragInstructionsId = $derived(`${generatedId}-drag-instructions`);
+const isVirtualizedTree = $derived(virtualized && items != null);
+const flattenedDataItems = $derived.by(() => flattenTreeDataItems(items ?? []));
+const flattenedDataItemById = $derived.by(() => new Map(flattenedDataItems.map((item) => [item.id, item])));
+const hasTreeChrome = $derived(selectionControls != null || showSearch || filtering || onreorder != null);
+const hasRegisteredItems = $derived(isVirtualizedTree ? flattenedDataItems.length > 0 : registry.size > 0);
+const activeVisibilityPredicate = $derived.by(() => {
+    if (!filtering)
+        return undefined;
     const query = normalizedFilterValue;
     const predicate = filterPredicate;
     return ({ id, label }) => predicate(label, id, query);
-  });
-  const activeDataVisibilityPredicate = $derived.by<
-    ((item: FlattenedTreeDataItem) => boolean) | undefined
-  >(() => {
-    if (!filtering) return undefined;
+});
+const activeDataVisibilityPredicate = $derived.by(() => {
+    if (!filtering)
+        return undefined;
     const query = normalizedFilterValue;
     const predicate = filterPredicate;
     return (item) => predicate(item.label, item.id, query);
-  });
-  const visibleDataItems = $derived.by(() =>
-    visibleTreeDataItems(flattenedDataItems, expandedIds, activeDataVisibilityPredicate),
-  );
-  const registryVisibleIds = $derived.by(() =>
-    registry.getVisible(expandedIds, activeVisibilityPredicate),
-  );
-  const visibleIds = $derived.by(() =>
-    isVirtualizedTree ? visibleDataItems.map((item) => item.id) : registryVisibleIds,
-  );
-  const hasNoFilterResults = $derived(filtering && hasRegisteredItems && visibleIds.length === 0);
-  const visibleIdSet = $derived.by(() => new SvelteSet(visibleIds));
-  const expandableBranchIds = $derived.by(() =>
-    isVirtualizedTree
-      ? flattenedDataItems.filter((item) => item.branch).map((item) => item.id)
-      : registry.getAllBranchIds({ bulkOnly: true }),
-  );
-  const expandableBranchCount = $derived(expandableBranchIds.length);
-  const hasExpandedItems = $derived(expandedIds.length > 0);
-
-  $effect(() => {
+});
+const visibleDataItems = $derived.by(() => visibleTreeDataItems(flattenedDataItems, expandedIds, activeDataVisibilityPredicate));
+const registryVisibleIds = $derived.by(() => registry.getVisible(expandedIds, activeVisibilityPredicate));
+const visibleIds = $derived.by(() => isVirtualizedTree ? visibleDataItems.map((item) => item.id) : registryVisibleIds);
+const hasNoFilterResults = $derived(filtering && hasRegisteredItems && visibleIds.length === 0);
+const visibleIdSet = $derived.by(() => new SvelteSet(visibleIds));
+const expandableBranchIds = $derived.by(() => isVirtualizedTree
+    ? flattenedDataItems.filter((item) => item.branch).map((item) => item.id)
+    : registry.getAllBranchIds({ bulkOnly: true }));
+const expandableBranchCount = $derived(expandableBranchIds.length);
+const hasExpandedItems = $derived(expandedIds.length > 0);
+$effect(() => {
     if (filterStatusTimer !== null) {
-      clearTimeout(filterStatusTimer);
-      filterStatusTimer = null;
+        clearTimeout(filterStatusTimer);
+        filterStatusTimer = null;
     }
-
     if (!filtering) {
-      filterStatusBusy = false;
-      filterStatusAnnouncement = '';
-      return;
+        filterStatusBusy = false;
+        filterStatusAnnouncement = '';
+        return;
     }
-
     const query = normalizedFilterValue;
     const resultCount = visibleIds.length;
     filterStatusBusy = true;
     filterStatusTimer = setTimeout(() => {
-      filterStatusAnnouncement =
-        resultCount === 0
-          ? `No results for ${query}.`
-          : `${resultCount} result${resultCount === 1 ? '' : 's'} found.`;
-      filterStatusAnnouncementSequence += 1;
-      filterStatusBusy = false;
-      filterStatusTimer = null;
+        filterStatusAnnouncement =
+            resultCount === 0
+                ? `No results for ${query}.`
+                : `${resultCount} result${resultCount === 1 ? '' : 's'} found.`;
+        filterStatusAnnouncementSequence += 1;
+        filterStatusBusy = false;
+        filterStatusTimer = null;
     }, 500);
-  });
-
-  // Initial roving tabindex: first selected visible item, or first visible item
-  const initialFocusId = $derived.by(() => {
+});
+// Initial roving tabindex: first selected visible item, or first visible item
+const initialFocusId = $derived.by(() => {
     if (selectionMode !== 'none' && selectedIds.length > 0) {
-      for (const id of visibleIds) {
-        if (selectedIds.includes(id)) return id;
-      }
+        for (const id of visibleIds) {
+            if (selectedIds.includes(id))
+                return id;
+        }
     }
     return visibleIds[0] ?? null;
-  });
-
-  function visibleFocusCandidate(id: string | null): string | null {
+});
+function visibleFocusCandidate(id) {
     return id !== null && visibleIds.includes(id) ? id : null;
-  }
-
-  // Validate both candidates against the current visible registry. initialFocusId
-  // is derived from visibleIds, but keeping both paths explicit protects this
-  // invariant if the fallback logic changes later.
-  const effectiveFocusedId = $derived.by(() => {
-    return (
-      visibleFocusCandidate(focusedId) ??
-      visibleFocusCandidate(initialFocusId) ??
-      visibleIds[0] ??
-      null
-    );
-  });
-
-  $effect(() => {
-    if (focusedId === null || visibleIds.includes(focusedId)) return;
+}
+// Validate both candidates against the current visible registry. initialFocusId
+// is derived from visibleIds, but keeping both paths explicit protects this
+// invariant if the fallback logic changes later.
+const effectiveFocusedId = $derived.by(() => {
+    return (visibleFocusCandidate(focusedId) ??
+        visibleFocusCandidate(initialFocusId) ??
+        visibleIds[0] ??
+        null);
+});
+$effect(() => {
+    if (focusedId === null || visibleIds.includes(focusedId))
+        return;
     focusedId = initialFocusId ?? visibleIds[0] ?? null;
-  });
-
-  const virtualizer = new TreeVirtualizer({
+});
+const virtualizer = new TreeVirtualizer({
     getScrollElement: () => treeElement,
     getCount: () => visibleDataItems.length,
     getItemKey: (index) => visibleDataItems[index]?.id ?? index,
     getEstimatedSize: () => virtualizationEstimatedRowHeight,
     getOverscan: () => virtualizationOverscan,
-    getInitialHeight: () =>
-      typeof virtualizationHeight === 'number'
+    getInitialHeight: () => typeof virtualizationHeight === 'number'
         ? virtualizationHeight
         : virtualizationEstimatedRowHeight * 10,
-  });
-
-  $effect(() => {
+});
+$effect(() => {
     virtualizer.setScrollElement(isVirtualizedTree ? treeElement : null);
-  });
-
-  const virtualItems = $derived(virtualizer.virtualItems);
-  const virtualizedActiveItem = $derived(
-    effectiveFocusedId ? flattenedDataItemById.get(effectiveFocusedId) : undefined,
-  );
-  const virtualizedActiveDescendantId = $derived(
-    isVirtualizedTree && virtualizedActiveItem
-      ? virtualItemElementId(virtualizedActiveItem)
-      : undefined,
-  );
-  const virtualRows = $derived.by(() => {
-    const rows: { virtualItem: VirtualItem; item: FlattenedTreeDataItem }[] = [];
-    const renderedIndexes = new Set<number>();
-
+});
+const virtualItems = $derived(virtualizer.virtualItems);
+const virtualizedActiveItem = $derived(effectiveFocusedId ? flattenedDataItemById.get(effectiveFocusedId) : undefined);
+const virtualizedActiveDescendantId = $derived(isVirtualizedTree && virtualizedActiveItem
+    ? virtualItemElementId(virtualizedActiveItem)
+    : undefined);
+const virtualRows = $derived.by(() => {
+    const rows = [];
+    const renderedIndexes = new Set();
     for (const virtualItem of virtualItems) {
-      const item = visibleDataItems[virtualItem.index];
-      if (item) {
-        renderedIndexes.add(virtualItem.index);
-        rows.push({ virtualItem, item });
-      }
+        const item = visibleDataItems[virtualItem.index];
+        if (item) {
+            renderedIndexes.add(virtualItem.index);
+            rows.push({ virtualItem, item });
+        }
     }
-
     if (effectiveFocusedId) {
-      const focusedIndex = visibleIds.indexOf(effectiveFocusedId);
-      const focusedItem = visibleDataItems[focusedIndex];
-      if (focusedItem && !renderedIndexes.has(focusedIndex)) {
-        const size = virtualizationEstimatedRowHeight;
-        rows.push({
-          item: focusedItem,
-          virtualItem: {
-            key: focusedItem.id,
-            index: focusedIndex,
-            start: focusedIndex * size,
-            end: (focusedIndex + 1) * size,
-            size,
-            lane: 0,
-          },
-        });
-      }
+        const focusedIndex = visibleIds.indexOf(effectiveFocusedId);
+        const focusedItem = visibleDataItems[focusedIndex];
+        if (focusedItem && !renderedIndexes.has(focusedIndex)) {
+            const size = virtualizationEstimatedRowHeight;
+            rows.push({
+                item: focusedItem,
+                virtualItem: {
+                    key: focusedItem.id,
+                    index: focusedIndex,
+                    start: focusedIndex * size,
+                    end: (focusedIndex + 1) * size,
+                    size,
+                    lane: 0,
+                },
+            });
+        }
     }
-
     rows.sort((a, b) => a.virtualItem.index - b.virtualItem.index);
     return rows;
-  });
-
-  function virtualItemElementId(item: FlattenedTreeDataItem): string {
+});
+function virtualItemElementId(item) {
     return `${treeId}-item-${item.index}`;
-  }
-
-  function virtualizedHeightValue(): string {
+}
+function virtualizedHeightValue() {
     return typeof virtualizationHeight === 'number'
-      ? `${virtualizationHeight}px`
-      : virtualizationHeight;
-  }
-
-  function virtualizedTreeStyle(): string {
+        ? `${virtualizationHeight}px`
+        : virtualizationHeight;
+}
+function virtualizedTreeStyle() {
     return `block-size: ${virtualizedHeightValue()}; overflow: auto; position: relative;`;
-  }
-
-  function treeStyle(): string | undefined {
+}
+function treeStyle() {
     const forwardedStyle = styleAttribute ?? undefined;
-    if (!isVirtualizedTree) return forwardedStyle;
+    if (!isVirtualizedTree)
+        return forwardedStyle;
     return forwardedStyle ? `${forwardedStyle}; ${virtualizedTreeStyle()}` : virtualizedTreeStyle();
-  }
-
-  function virtualizedSpacerStyle(): string {
+}
+function virtualizedSpacerStyle() {
     return `block-size: ${virtualizer.totalSize}px; position: relative; inline-size: 100%;`;
-  }
-
-  function virtualizedRowStyle(start: number, size: number): string {
+}
+function virtualizedRowStyle(start, size) {
     return `position: absolute; inset-inline: 0; transform: translateY(${start}px); block-size: ${size}px;`;
-  }
-
-  function virtualizedItemExpanded(item: FlattenedTreeDataItem): boolean {
-    return (
-      expandedIds.includes(item.id) ||
-      (filtering &&
-        item.branch &&
-        visibleDataItems.some(
-          (visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id),
-        ))
-    );
-  }
-
-  function virtualizedFilterForcedOpen(item: FlattenedTreeDataItem): boolean {
-    return (
-      item.branch &&
-      filtering &&
-      !expandedIds.includes(item.id) &&
-      visibleDataItems.some(
-        (visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id),
-      )
-    );
-  }
-
-  function firstVisibleVirtualizedChildIndex(parentId: string): number {
+}
+function virtualizedItemExpanded(item) {
+    return (expandedIds.includes(item.id) ||
+        (filtering &&
+            item.branch &&
+            visibleDataItems.some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id))));
+}
+function virtualizedFilterForcedOpen(item) {
+    return (item.branch &&
+        filtering &&
+        !expandedIds.includes(item.id) &&
+        visibleDataItems.some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id)));
+}
+function firstVisibleVirtualizedChildIndex(parentId) {
     return visibleDataItems.findIndex((item) => item.parentId === parentId);
-  }
-
-  function focusFirstVirtualizedChild(parentId: string): void {
+}
+function focusFirstVirtualizedChild(parentId) {
     const index = firstVisibleVirtualizedChildIndex(parentId);
-    if (index !== -1) void focusVirtualIndex(index);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Helpers
-  // ---------------------------------------------------------------------------
-
-  function focusNode(id: string): void {
+    if (index !== -1)
+        void focusVirtualIndex(index);
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function focusNode(id) {
     if (isVirtualizedTree) {
-      const index = visibleIds.indexOf(id);
-      if (index !== -1) void focusVirtualIndex(index);
-      return;
+        const index = visibleIds.indexOf(id);
+        if (index !== -1)
+            void focusVirtualIndex(index);
+        return;
     }
-
     focusedId = id;
     registry.getNode(id)?.focus();
-  }
-
-  async function focusVirtualIndex(index: number): Promise<void> {
+}
+async function focusVirtualIndex(index) {
     const id = visibleIds[index];
-    if (!id) return;
+    if (!id)
+        return;
     virtualizer.scrollToIndex(index, { align: 'auto' });
     await tick();
     focusedId = id;
     treeElement?.focus();
-  }
-
-  function announceExpansion(message: string): void {
+}
+function announceExpansion(message) {
     expansionAnnouncement = message;
     expansionAnnouncementSequence += 1;
-  }
-
-  function announceDrag(message: string): void {
+}
+function announceDrag(message) {
     dragAnnouncement = message;
     dragAnnouncementSequence += 1;
-  }
-
-  $effect(() => {
+}
+$effect(() => {
     if (!onreorder) {
-      dragController = null;
-      return;
+        dragController = null;
+        return;
     }
-
-    dragController ??= new TreeDragController(
-      untrack(() => ({
+    dragController ??= new TreeDragController(untrack(() => ({
         getVisibleIds: () => visibleIds,
         getNode: (id) => registry.getNode(id),
         getParentId: (id) => registry.parentOf(id),
@@ -455,398 +309,376 @@
         focus: focusNode,
         announce: announceDrag,
         commit: (draggedId, target) => onreorder?.(draggedId, target),
-      })),
-    );
-  });
-
-  function focusFallbackAfterUnregister(parentId: string | null): void {
+    })));
+});
+function focusFallbackAfterUnregister(parentId) {
     const currentVisibleIds = registry.getVisible(expandedIds, activeVisibilityPredicate);
-    const selectedVisibleId =
-      selectionMode === 'none' ? null : currentVisibleIds.find((id) => selectedIds.includes(id));
-    const fallbackId =
-      (parentId && currentVisibleIds.includes(parentId) ? parentId : null) ??
-      selectedVisibleId ??
-      currentVisibleIds[0] ??
-      null;
-
+    const selectedVisibleId = selectionMode === 'none' ? null : currentVisibleIds.find((id) => selectedIds.includes(id));
+    const fallbackId = (parentId && currentVisibleIds.includes(parentId) ? parentId : null) ??
+        selectedVisibleId ??
+        currentVisibleIds[0] ??
+        null;
     if (fallbackId) {
-      focusNode(fallbackId);
-    } else {
-      focusedId = null;
+        focusNode(fallbackId);
     }
-  }
-
-  function setExpandedInternal(id: string, next: boolean): void {
+    else {
+        focusedId = null;
+    }
+}
+function setExpandedInternal(id, next) {
     if (next) {
-      if (!expandedIds.includes(id)) {
-        expandedIds = [...expandedIds, id];
-      }
-    } else {
-      expandedIds = expandedIds.filter((existing) => existing !== id);
+        if (!expandedIds.includes(id)) {
+            expandedIds = [...expandedIds, id];
+        }
     }
-  }
-
-  function withExpandedIds(ids: readonly string[]): string[] {
+    else {
+        expandedIds = expandedIds.filter((existing) => existing !== id);
+    }
+}
+function withExpandedIds(ids) {
     const nextIds = [...expandedIds];
     const seen = new Set(nextIds);
     for (const id of ids) {
-      if (!seen.has(id)) {
-        seen.add(id);
-        nextIds.push(id);
-      }
+        if (!seen.has(id)) {
+            seen.add(id);
+            nextIds.push(id);
+        }
     }
     return nextIds;
-  }
-
-  async function expandAll(): Promise<void> {
+}
+async function expandAll() {
     if (isVirtualizedTree) {
-      const nextIds = withExpandedIds(expandableBranchIds);
-      if (nextIds.length !== expandedIds.length) {
-        expandedIds = nextIds;
-        await tick();
-        announceExpansion('All items expanded.');
-      }
-      return;
+        const nextIds = withExpandedIds(expandableBranchIds);
+        if (nextIds.length !== expandedIds.length) {
+            expandedIds = nextIds;
+            await tick();
+            announceExpansion('All items expanded.');
+        }
+        return;
     }
-
     let changed = false;
-
     while (true) {
-      const nextIds = withExpandedIds(registry.getAllBranchIds({ bulkOnly: true }));
-      if (nextIds.length === expandedIds.length) break;
-      expandedIds = nextIds;
-      changed = true;
-      await tick();
+        const nextIds = withExpandedIds(registry.getAllBranchIds({ bulkOnly: true }));
+        if (nextIds.length === expandedIds.length)
+            break;
+        expandedIds = nextIds;
+        changed = true;
+        await tick();
     }
-
-    if (changed) announceExpansion('All items expanded.');
-  }
-
-  function collapseAll(): void {
-    if (expandedIds.length === 0) return;
+    if (changed)
+        announceExpansion('All items expanded.');
+}
+function collapseAll() {
+    if (expandedIds.length === 0)
+        return;
     expandedIds = [];
     announceExpansion('All items collapsed.');
-  }
-
-  function expandOneLevel(): void {
+}
+function expandOneLevel() {
     const expandedIdSet = new Set(expandedIds);
     const visibleBranchIds = isVirtualizedTree
-      ? visibleDataItems
-          .filter((item) => item.branch && item.ancestorIds.every((id) => expandedIdSet.has(id)))
-          .map((item) => item.id)
-      : visibleIds.filter(
-          (id) =>
-            registry.isBulkExpandableBranch(id) &&
-            registry.ancestorsOf(id).every((ancestorId) => expandedIdSet.has(ancestorId)),
-        );
+        ? visibleDataItems
+            .filter((item) => item.branch && item.ancestorIds.every((id) => expandedIdSet.has(id)))
+            .map((item) => item.id)
+        : visibleIds.filter((id) => registry.isBulkExpandableBranch(id) &&
+            registry.ancestorsOf(id).every((ancestorId) => expandedIdSet.has(ancestorId)));
     const nextIds = withExpandedIds(visibleBranchIds);
-    if (nextIds.length === expandedIds.length) return;
+    if (nextIds.length === expandedIds.length)
+        return;
     expandedIds = nextIds;
     announceExpansion('One tree level expanded.');
-  }
-
-  function focusItem(id: string): void {
-    if (!visibleIds.includes(id)) return;
+}
+function focusItem(id) {
+    if (!visibleIds.includes(id))
+        return;
     focusNode(id);
-  }
-
-  async function expandToItem(id: string): Promise<void> {
+}
+async function expandToItem(id) {
     if (isVirtualizedTree) {
-      const item = flattenedDataItemById.get(id);
-      if (!item) return;
-      const nextIds = withExpandedIds(item.ancestorIds);
-      if (nextIds.length !== expandedIds.length) {
-        expandedIds = nextIds;
-        await tick();
-      }
-      focusItem(id);
-      return;
+        const item = flattenedDataItemById.get(id);
+        if (!item)
+            return;
+        const nextIds = withExpandedIds(item.ancestorIds);
+        if (nextIds.length !== expandedIds.length) {
+            expandedIds = nextIds;
+            await tick();
+        }
+        focusItem(id);
+        return;
     }
-
-    if (!registry.getNode(id)) return;
+    if (!registry.getNode(id))
+        return;
     const nextIds = withExpandedIds(registry.ancestorsOf(id));
     if (nextIds.length !== expandedIds.length) {
-      expandedIds = nextIds;
-      await tick();
+        expandedIds = nextIds;
+        await tick();
     }
     focusItem(id);
-  }
-
-  function scrollToRow(id: string, options: ScrollIntoViewOptions | undefined = undefined): void {
+}
+function scrollToRow(id, options = undefined) {
     if (isVirtualizedTree) {
-      const index = visibleIds.indexOf(id);
-      if (index !== -1) {
-        virtualizer.scrollToIndex(index, {
-          align: options?.block === 'center' ? 'center' : 'auto',
-          behavior: options?.behavior === 'smooth' ? 'smooth' : 'auto',
-        });
-      }
-      return;
+        const index = visibleIds.indexOf(id);
+        if (index !== -1) {
+            virtualizer.scrollToIndex(index, {
+                align: options?.block === 'center' ? 'center' : 'auto',
+                behavior: options?.behavior === 'smooth' ? 'smooth' : 'auto',
+            });
+        }
+        return;
     }
-
     registry.getNode(id)?.node.scrollIntoView(options ?? { block: 'nearest' });
-  }
-
-  function disabledIdsFor(ids: readonly string[]): Set<string> {
-    const disabledIds = new Set<string>();
+}
+function disabledIdsFor(ids) {
+    const disabledIds = new Set();
     for (const id of ids) {
-      if (isVirtualizedTree) {
-        if (flattenedDataItemById.get(id)?.disabled) disabledIds.add(id);
-      } else if (registry.getNode(id)?.disabled) {
-        disabledIds.add(id);
-      }
+        if (isVirtualizedTree) {
+            if (flattenedDataItemById.get(id)?.disabled)
+                disabledIds.add(id);
+        }
+        else if (registry.getNode(id)?.disabled) {
+            disabledIds.add(id);
+        }
     }
     return disabledIds;
-  }
-
-  function checkboxSelectionActive(): boolean {
+}
+function checkboxSelectionActive() {
     return checkboxSelection && selectionMode === 'multiple';
-  }
-
-  function ariaCheckedForSelectionState(state: ReturnType<typeof selectionStateForId>) {
-    if (!checkboxSelectionActive()) return undefined;
-    if (state.indeterminate) return 'mixed';
+}
+function ariaCheckedForSelectionState(state) {
+    if (!checkboxSelectionActive())
+        return undefined;
+    if (state.indeterminate)
+        return 'mixed';
     return state.checked ? 'true' : 'false';
-  }
-
-  function selectionTargetsFor(id: string): string[] {
+}
+function selectionTargetsFor(id) {
     if (isVirtualizedTree) {
-      const item = flattenedDataItemById.get(id);
-      if (!item) return [];
-      return [id, ...descendantTreeDataIds(flattenedDataItems, id)];
+        const item = flattenedDataItemById.get(id);
+        if (!item)
+            return [];
+        return [id, ...descendantTreeDataIds(flattenedDataItems, id)];
     }
-
     const node = registry.getNode(id);
-    if (!node) return [];
+    if (!node)
+        return [];
     const explicitScopeIds = node.selectionScopeIds?.();
-    if (explicitScopeIds?.length) return [...explicitScopeIds];
+    if (explicitScopeIds?.length)
+        return [...explicitScopeIds];
     return [id, ...registry.descendantsOf(id)];
-  }
-
-  function childDataItemIds(parentId: string | null): string[] {
+}
+function childDataItemIds(parentId) {
     return visibleDataItems.filter((item) => item.parentId === parentId).map((item) => item.id);
-  }
-
-  function selectionTargetsForChildren(
-    parentId: string | null,
-    includeDescendants: boolean,
-  ): string[] {
+}
+function selectionTargetsForChildren(parentId, includeDescendants) {
     const childIds = isVirtualizedTree ? childDataItemIds(parentId) : registry.childrenOf(parentId);
-    if (!includeDescendants) return childIds;
-
-    const targets: string[] = [];
+    if (!includeDescendants)
+        return childIds;
+    const targets = [];
     for (const childId of childIds) {
-      targets.push(...selectionTargetsFor(childId));
+        targets.push(...selectionTargetsFor(childId));
     }
     return [...new Set(targets)];
-  }
-
-  function selectionStateForId(id: string) {
+}
+function selectionStateForId(id) {
     const targets = selectionBehavior === 'cascade' ? selectionTargetsFor(id) : [id];
     const aggregateDisabledIds = disabledIdsFor(targets.filter((targetId) => targetId !== id));
     return selectionStateFor(selectedIds, targets, aggregateDisabledIds);
-  }
-
-  function applySelectionScope(
-    targets: readonly string[],
-    next: boolean | undefined = undefined,
-  ): void {
+}
+function applySelectionScope(targets, next = undefined) {
     const disabledIds = disabledIdsFor(targets);
     selectedIds =
-      next === true
-        ? selectIds(selectedIds, targets, disabledIds)
-        : next === false
-          ? deselectIds(selectedIds, targets, disabledIds)
-          : toggleSelectionScope(selectedIds, targets, disabledIds);
-  }
-
-  function toggleSelectionScopeInternal(id: string): void {
-    if (selectionMode !== 'multiple') return;
+        next === true
+            ? selectIds(selectedIds, targets, disabledIds)
+            : next === false
+                ? deselectIds(selectedIds, targets, disabledIds)
+                : toggleSelectionScope(selectedIds, targets, disabledIds);
+}
+function toggleSelectionScopeInternal(id) {
+    if (selectionMode !== 'multiple')
+        return;
     const disabled = isVirtualizedTree
-      ? (flattenedDataItemById.get(id)?.disabled ?? true)
-      : (registry.getNode(id)?.disabled ?? true);
-    if (disabled) return;
-
+        ? (flattenedDataItemById.get(id)?.disabled ?? true)
+        : (registry.getNode(id)?.disabled ?? true);
+    if (disabled)
+        return;
     if (selectionBehavior === 'cascade') {
-      applySelectionScope(selectionTargetsFor(id));
-    } else {
-      selectedIds = toggleIndependentId(selectedIds, id, disabledIdsFor([id]));
+        applySelectionScope(selectionTargetsFor(id));
+    }
+    else {
+        selectedIds = toggleIndependentId(selectedIds, id, disabledIdsFor([id]));
     }
     selectionAnchorId = id;
-  }
-
-  function toggleSelectedInternal(id: string, event: KeyboardEvent | MouseEvent | null): void {
+}
+function toggleSelectedInternal(id, event) {
     const disabled = isVirtualizedTree
-      ? (flattenedDataItemById.get(id)?.disabled ?? true)
-      : (registry.getNode(id)?.disabled ?? true);
-    if (disabled) return;
-    if (selectionMode === 'none') return;
-
+        ? (flattenedDataItemById.get(id)?.disabled ?? true)
+        : (registry.getNode(id)?.disabled ?? true);
+    if (disabled)
+        return;
+    if (selectionMode === 'none')
+        return;
     const isShift = event?.shiftKey ?? false;
     const isMeta = event ? event.metaKey || event.ctrlKey : false;
-
     if (selectionMode === 'single') {
-      selectedIds = selectedIds.includes(id) ? [] : [id];
-      selectionAnchorId = id;
-      return;
+        selectedIds = selectedIds.includes(id) ? [] : [id];
+        selectionAnchorId = id;
+        return;
     }
-
     // multiple
     if (isShift && selectionAnchorId) {
-      // Reset anchor if it has become invisible
-      const anchorVisible = visibleIds.includes(selectionAnchorId);
-      const anchor = anchorVisible ? selectionAnchorId : id;
-      if (!anchorVisible) selectionAnchorId = id;
-
-      const anchorIndex = visibleIds.indexOf(anchor);
-      const targetIndex = visibleIds.indexOf(id);
-      const start = Math.min(anchorIndex, targetIndex);
-      const end = Math.max(anchorIndex, targetIndex);
-      const rangeIds = visibleIds.slice(start, end + 1).filter((rangeId) => {
-        if (isVirtualizedTree) return !flattenedDataItemById.get(rangeId)?.disabled;
-        const rangeNode = registry.getNode(rangeId);
-        return rangeNode && !rangeNode.disabled;
-      });
-      selectedIds = rangeIds;
-    } else if (isMeta) {
-      // Ctrl/Cmd toggles individual
-      selectedIds = toggleIndependentId(selectedIds, id);
-      selectionAnchorId = id;
-    } else {
-      if (selectionBehavior === 'cascade') {
-        applySelectionScope(selectionTargetsFor(id));
-      } else {
+        // Reset anchor if it has become invisible
+        const anchorVisible = visibleIds.includes(selectionAnchorId);
+        const anchor = anchorVisible ? selectionAnchorId : id;
+        if (!anchorVisible)
+            selectionAnchorId = id;
+        const anchorIndex = visibleIds.indexOf(anchor);
+        const targetIndex = visibleIds.indexOf(id);
+        const start = Math.min(anchorIndex, targetIndex);
+        const end = Math.max(anchorIndex, targetIndex);
+        const rangeIds = visibleIds.slice(start, end + 1).filter((rangeId) => {
+            if (isVirtualizedTree)
+                return !flattenedDataItemById.get(rangeId)?.disabled;
+            const rangeNode = registry.getNode(rangeId);
+            return rangeNode && !rangeNode.disabled;
+        });
+        selectedIds = rangeIds;
+    }
+    else if (isMeta) {
+        // Ctrl/Cmd toggles individual
         selectedIds = toggleIndependentId(selectedIds, id);
-      }
-      selectionAnchorId = id;
+        selectionAnchorId = id;
     }
-  }
-
-  function selectAll(): void {
-    if (selectionMode !== 'multiple') return;
+    else {
+        if (selectionBehavior === 'cascade') {
+            applySelectionScope(selectionTargetsFor(id));
+        }
+        else {
+            selectedIds = toggleIndependentId(selectedIds, id);
+        }
+        selectionAnchorId = id;
+    }
+}
+function selectAll() {
+    if (selectionMode !== 'multiple')
+        return;
     const allVisibleTargets = visibleIds.flatMap((id) => {
-      const disabled = isVirtualizedTree
-        ? (flattenedDataItemById.get(id)?.disabled ?? true)
-        : (registry.getNode(id)?.disabled ?? true);
-      if (disabled) return [];
-      return selectionBehavior === 'cascade' ? selectionTargetsFor(id) : [id];
+        const disabled = isVirtualizedTree
+            ? (flattenedDataItemById.get(id)?.disabled ?? true)
+            : (registry.getNode(id)?.disabled ?? true);
+        if (disabled)
+            return [];
+        return selectionBehavior === 'cascade' ? selectionTargetsFor(id) : [id];
     });
     const disabledIds = disabledIdsFor(allVisibleTargets);
-    selectedIds = selectIds(
-      selectionBehavior === 'cascade' ? selectedIds : [],
-      allVisibleTargets,
-      disabledIds,
-    );
+    selectedIds = selectIds(selectionBehavior === 'cascade' ? selectedIds : [], allVisibleTargets, disabledIds);
     // Guarded by length, so the first selected id is present.
-    if (allVisibleTargets.length > 0) selectionAnchorId = allVisibleTargets[0]!;
-  }
-
-  const treeRef: TreeRef = {
+    if (allVisibleTargets.length > 0)
+        selectionAnchorId = allVisibleTargets[0];
+}
+const treeRef = {
     expandAll,
     collapseAll,
     expandOneLevel,
     focusItem,
     expandToItem,
     scrollToRow,
-  };
-
-  $effect(() => {
+};
+$effect(() => {
     ref = treeRef;
     return () => {
-      ref = undefined;
+        ref = undefined;
     };
-  });
-
-  // ---------------------------------------------------------------------------
-  // Context
-  // ---------------------------------------------------------------------------
-
-  const context: TreeContext = {
+});
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const context = {
     get selectionMode() {
-      return selectionMode;
+        return selectionMode;
     },
     get selectionBehavior() {
-      return selectionBehavior;
+        return selectionBehavior;
     },
     get checkboxSelection() {
-      return checkboxSelection;
+        return checkboxSelection;
     },
     get multiselectable() {
-      return selectionMode === 'multiple';
+        return selectionMode === 'multiple';
     },
     get typeaheadEnabled() {
-      return !disableTypeahead;
+        return !disableTypeahead;
     },
     get expandedIds() {
-      return expandedIds;
+        return expandedIds;
     },
     get selectedIds() {
-      return selectedIds;
+        return selectedIds;
     },
     get focusedId() {
-      return effectiveFocusedId;
+        return effectiveFocusedId;
     },
     get filtering() {
-      return filtering;
+        return filtering;
     },
     get filterValue() {
-      return normalizedFilterValue;
+        return normalizedFilterValue;
     },
     get hasRegisteredItems() {
-      return hasRegisteredItems;
+        return hasRegisteredItems;
     },
     get expandableBranchCount() {
-      return expandableBranchCount;
+        return expandableBranchCount;
     },
     get hasExpandedItems() {
-      return hasExpandedItems;
+        return hasExpandedItems;
     },
     get dragController() {
-      return dragController;
+        return dragController;
     },
     get dragInstructionsId() {
-      return dragInstructionsId;
+        return dragInstructionsId;
     },
     isExpanded(id) {
-      return expandedIds.includes(id);
+        return expandedIds.includes(id);
     },
     isSelected(id) {
-      return selectedIds.includes(id);
+        return selectedIds.includes(id);
     },
     isFocused(id) {
-      return effectiveFocusedId === id;
+        return effectiveFocusedId === id;
     },
     positionInSet(id) {
-      const siblings = registry.siblingsOf(id).filter((siblingId) => visibleIdSet.has(siblingId));
-      const index = siblings.indexOf(id);
-      return index === -1 ? undefined : index + 1;
+        const siblings = registry.siblingsOf(id).filter((siblingId) => visibleIdSet.has(siblingId));
+        const index = siblings.indexOf(id);
+        return index === -1 ? undefined : index + 1;
     },
     setSize(id) {
-      const siblings = registry.siblingsOf(id).filter((siblingId) => visibleIdSet.has(siblingId));
-      return siblings.length || undefined;
+        const siblings = registry.siblingsOf(id).filter((siblingId) => visibleIdSet.has(siblingId));
+        return siblings.length || undefined;
     },
     isVisible(id) {
-      return visibleIdSet.has(id);
+        return visibleIdSet.has(id);
     },
     hasVisibleDescendant(id) {
-      return registry.descendantsOf(id).some((descendantId) => visibleIdSet.has(descendantId));
+        return registry.descendantsOf(id).some((descendantId) => visibleIdSet.has(descendantId));
     },
     matchesFilter(label, id) {
-      return filtering && filterPredicate(label, id, normalizedFilterValue);
+        return filtering && filterPredicate(label, id, normalizedFilterValue);
     },
     checkboxSelectionActive,
     selectionStateFor: selectionStateForId,
     toggleSelectionScope(id) {
-      toggleSelectionScopeInternal(id);
+        toggleSelectionScopeInternal(id);
     },
     selectSelectionScope(parentId, next, includeDescendants) {
-      if (selectionMode !== 'multiple') return;
-      applySelectionScope(selectionTargetsForChildren(parentId, includeDescendants), next);
+        if (selectionMode !== 'multiple')
+            return;
+        applySelectionScope(selectionTargetsForChildren(parentId, includeDescendants), next);
     },
     hasSelectableSelectionScope(parentId, includeDescendants) {
-      const targets = selectionTargetsForChildren(parentId, includeDescendants);
-      const disabledIds = disabledIdsFor(targets);
-      return targets.some((id) => !disabledIds.has(id));
+        const targets = selectionTargetsForChildren(parentId, includeDescendants);
+        const disabledIds = disabledIdsFor(targets);
+        return targets.some((id) => !disabledIds.has(id));
     },
     selectionTargetsFor,
     selectionTargetsForChildren,
@@ -859,369 +691,342 @@
     scrollToRow,
     toggleSelected: toggleSelectedInternal,
     register(node) {
-      const unregister = registry.register(node);
-      return () => {
-        unregister();
-        if (focusedId === node.id) {
-          focusFallbackAfterUnregister(node.parentId);
-        }
-      };
+        const unregister = registry.register(node);
+        return () => {
+            unregister();
+            if (focusedId === node.id) {
+                focusFallbackAfterUnregister(node.parentId);
+            }
+        };
     },
     focusVisibleDelta(currentId, delta) {
-      const index = visibleIds.indexOf(currentId);
-      if (index === -1) return;
-      const nextIndex = index + delta;
-      if (nextIndex < 0 || nextIndex >= visibleIds.length) return;
-      // Bounds checks above prove the requested visible id exists.
-      focusNode(visibleIds[nextIndex]!);
+        const index = visibleIds.indexOf(currentId);
+        if (index === -1)
+            return;
+        const nextIndex = index + delta;
+        if (nextIndex < 0 || nextIndex >= visibleIds.length)
+            return;
+        // Bounds checks above prove the requested visible id exists.
+        focusNode(visibleIds[nextIndex]);
     },
     canFocusVisibleDelta(currentId, delta) {
-      const index = visibleIds.indexOf(currentId);
-      if (index === -1) return false;
-      const nextIndex = index + delta;
-      return nextIndex >= 0 && nextIndex < visibleIds.length;
+        const index = visibleIds.indexOf(currentId);
+        if (index === -1)
+            return false;
+        const nextIndex = index + delta;
+        return nextIndex >= 0 && nextIndex < visibleIds.length;
     },
     focusFirstVisible() {
-      // Length check proves the first visible id exists.
-      if (visibleIds.length > 0) focusNode(visibleIds[0]!);
+        // Length check proves the first visible id exists.
+        if (visibleIds.length > 0)
+            focusNode(visibleIds[0]);
     },
     focusLastVisible() {
-      // Length check proves the last visible id exists.
-      if (visibleIds.length > 0) focusNode(visibleIds[visibleIds.length - 1]!);
+        // Length check proves the last visible id exists.
+        if (visibleIds.length > 0)
+            focusNode(visibleIds[visibleIds.length - 1]);
     },
     focusParent(currentId) {
-      const parentId = registry.parentOf(currentId);
-      if (parentId) focusNode(parentId);
+        const parentId = registry.parentOf(currentId);
+        if (parentId)
+            focusNode(parentId);
     },
     focusFirstChild(currentId) {
-      const childId = registry.childrenOf(currentId).find((id) => visibleIdSet.has(id));
-      if (childId) focusNode(childId);
+        const childId = registry.childrenOf(currentId).find((id) => visibleIdSet.has(id));
+        if (childId)
+            focusNode(childId);
     },
     handleTypeahead(char, currentId) {
-      if (disableTypeahead) return;
-
-      const match = registry.typeaheadMatch(
-        typeaheadBuffer.push(char),
-        currentId,
-        expandedIds,
-        activeVisibilityPredicate,
-      );
-      if (match) focusNode(match);
+        if (disableTypeahead)
+            return;
+        const match = registry.typeaheadMatch(typeaheadBuffer.push(char), currentId, expandedIds, activeVisibilityPredicate);
+        if (match)
+            focusNode(match);
     },
     expandSiblings(currentId) {
-      const siblings = registry.siblingsOf(currentId);
-      const branchSiblings = siblings.filter((id) => {
-        const node = registry.getNode(id);
-        return node?.isBranch() && !expandedIds.includes(id);
-      });
-      if (branchSiblings.length > 0) {
-        expandedIds = [...expandedIds, ...branchSiblings];
-      }
+        const siblings = registry.siblingsOf(currentId);
+        const branchSiblings = siblings.filter((id) => {
+            const node = registry.getNode(id);
+            return node?.isBranch() && !expandedIds.includes(id);
+        });
+        if (branchSiblings.length > 0) {
+            expandedIds = [...expandedIds, ...branchSiblings];
+        }
     },
     notifyFocus(id) {
-      focusedId = id;
+        focusedId = id;
     },
-  };
-
-  setTreeContext(context);
-  setTreeItemParentContext({ parentId: null, level: 1 });
-
-  // ---------------------------------------------------------------------------
-  // Keyboard handler (Ctrl/Cmd+A handled at tree level)
-  // ---------------------------------------------------------------------------
-
-  function handleKeydown(event: KeyboardEvent): void {
-    if (isVirtualizedTree && handleVirtualizedKeydown(event)) return;
-
+};
+setTreeContext(context);
+setTreeItemParentContext({ parentId: null, level: 1 });
+// ---------------------------------------------------------------------------
+// Keyboard handler (Ctrl/Cmd+A handled at tree level)
+// ---------------------------------------------------------------------------
+function handleKeydown(event) {
+    if (isVirtualizedTree && handleVirtualizedKeydown(event))
+        return;
     if ((event.metaKey || event.ctrlKey) && event.key === 'a') {
-      event.preventDefault();
-      selectAll();
+        event.preventDefault();
+        selectAll();
     }
-
     if (event.key === 'Escape' && dragController?.dragging) {
-      event.preventDefault();
-      dragController.cancel();
+        event.preventDefault();
+        dragController.cancel();
     }
-  }
-
-  function currentVirtualIndex(): number {
+}
+function currentVirtualIndex() {
     const index = effectiveFocusedId ? visibleIds.indexOf(effectiveFocusedId) : -1;
     return index === -1 ? 0 : index;
-  }
-
-  function focusVirtualDelta(delta: number): void {
+}
+function focusVirtualDelta(delta) {
     const nextIndex = currentVirtualIndex() + delta;
-    if (nextIndex < 0 || nextIndex >= visibleIds.length) return;
+    if (nextIndex < 0 || nextIndex >= visibleIds.length)
+        return;
     void focusVirtualIndex(nextIndex);
-  }
-
-  function applyVirtualizedShiftSelection(currentId: string | null, event: KeyboardEvent): void {
-    if (!currentId || !event.shiftKey || selectionMode !== 'multiple') return;
+}
+function applyVirtualizedShiftSelection(currentId, event) {
+    if (!currentId || !event.shiftKey || selectionMode !== 'multiple')
+        return;
     toggleSelectedInternal(currentId, event);
-  }
-
-  function expandVirtualizedSiblings(currentId: string | null): void {
+}
+function expandVirtualizedSiblings(currentId) {
     const currentItem = currentId ? flattenedDataItemById.get(currentId) : undefined;
-    if (!currentItem) return;
+    if (!currentItem)
+        return;
     const siblingBranchIds = flattenedDataItems
-      .filter((item) => item.parentId === currentItem.parentId && item.branch)
-      .map((item) => item.id);
+        .filter((item) => item.parentId === currentItem.parentId && item.branch)
+        .map((item) => item.id);
     const nextIds = withExpandedIds(siblingBranchIds);
-    if (nextIds.length !== expandedIds.length) expandedIds = nextIds;
-  }
-
-  function handleVirtualizedKeydown(event: KeyboardEvent): boolean {
+    if (nextIds.length !== expandedIds.length)
+        expandedIds = nextIds;
+}
+function handleVirtualizedKeydown(event) {
     if ((event.metaKey || event.ctrlKey) && event.key === 'a') {
-      event.preventDefault();
-      selectAll();
-      return true;
+        event.preventDefault();
+        selectAll();
+        return true;
     }
-
     const currentId = effectiveFocusedId;
     const currentItem = currentId ? flattenedDataItemById.get(currentId) : undefined;
-
     switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        applyVirtualizedShiftSelection(currentId, event);
-        focusVirtualDelta(1);
-        return true;
-      case 'ArrowUp':
-        event.preventDefault();
-        applyVirtualizedShiftSelection(currentId, event);
-        focusVirtualDelta(-1);
-        return true;
-      case 'Home':
-        event.preventDefault();
-        void focusVirtualIndex(0);
-        return true;
-      case 'End':
-        event.preventDefault();
-        void focusVirtualIndex(visibleIds.length - 1);
-        return true;
-      case 'ArrowRight':
-        event.preventDefault();
-        if (!currentItem?.branch) return true;
-        if (!virtualizedItemExpanded(currentItem)) {
-          setExpandedInternal(currentItem.id, true);
-        } else {
-          focusFirstVirtualizedChild(currentItem.id);
-        }
-        return true;
-      case 'ArrowLeft':
-        event.preventDefault();
-        if (currentItem?.branch && expandedIds.includes(currentItem.id)) {
-          setExpandedInternal(currentItem.id, false);
-        } else if (currentItem?.parentId) {
-          focusNode(currentItem.parentId);
-        }
-        return true;
-      case 'Enter':
-      case ' ':
-        if (!currentItem) return false;
-        event.preventDefault();
-        activateVirtualizedItemFromKeyboard(currentItem, event);
-        return true;
-      case '*':
-        event.preventDefault();
-        expandVirtualizedSiblings(currentId);
-        return true;
-      default:
-        return handleVirtualizedTypeahead(event);
+        case 'ArrowDown':
+            event.preventDefault();
+            applyVirtualizedShiftSelection(currentId, event);
+            focusVirtualDelta(1);
+            return true;
+        case 'ArrowUp':
+            event.preventDefault();
+            applyVirtualizedShiftSelection(currentId, event);
+            focusVirtualDelta(-1);
+            return true;
+        case 'Home':
+            event.preventDefault();
+            void focusVirtualIndex(0);
+            return true;
+        case 'End':
+            event.preventDefault();
+            void focusVirtualIndex(visibleIds.length - 1);
+            return true;
+        case 'ArrowRight':
+            event.preventDefault();
+            if (!currentItem?.branch)
+                return true;
+            if (!virtualizedItemExpanded(currentItem)) {
+                setExpandedInternal(currentItem.id, true);
+            }
+            else {
+                focusFirstVirtualizedChild(currentItem.id);
+            }
+            return true;
+        case 'ArrowLeft':
+            event.preventDefault();
+            if (currentItem?.branch && expandedIds.includes(currentItem.id)) {
+                setExpandedInternal(currentItem.id, false);
+            }
+            else if (currentItem?.parentId) {
+                focusNode(currentItem.parentId);
+            }
+            return true;
+        case 'Enter':
+        case ' ':
+            if (!currentItem)
+                return false;
+            event.preventDefault();
+            activateVirtualizedItemFromKeyboard(currentItem, event);
+            return true;
+        case '*':
+            event.preventDefault();
+            expandVirtualizedSiblings(currentId);
+            return true;
+        default:
+            return handleVirtualizedTypeahead(event);
     }
-  }
-
-  function handleVirtualizedTypeahead(event: KeyboardEvent): boolean {
+}
+function handleVirtualizedTypeahead(event) {
     if (disableTypeahead || !isTypeaheadKey(event)) {
-      return false;
+        return false;
     }
-
     event.preventDefault();
     const startIndex = currentVirtualIndex();
-    const match = findTypeaheadMatch(
-      visibleDataItems.map((item, index) => ({
+    const match = findTypeaheadMatch(visibleDataItems.map((item, index) => ({
         value: index,
         label: item.label,
         disabled: item.disabled,
-      })),
-      typeaheadBuffer.push(event.key),
-      startIndex,
-    );
-    if (match !== undefined) void focusVirtualIndex(match);
+    })), typeaheadBuffer.push(event.key), startIndex);
+    if (match !== undefined)
+        void focusVirtualIndex(match);
     return true;
-  }
-
-  function updateFilterValue(next: string): void {
-    if (!isFilterControlled) uncontrolledFilterValue = next;
+}
+function updateFilterValue(next) {
+    if (!isFilterControlled)
+        uncontrolledFilterValue = next;
     onfilterchange?.(next);
-  }
-
-  function handleFilterInput(event: Event): void {
-    const target = event.currentTarget as HTMLInputElement;
+}
+function handleFilterInput(event) {
+    const target = event.currentTarget;
     updateFilterValue(target.value);
-  }
-
-  function handleFilterKeydown(event: KeyboardEvent): void {
+}
+function handleFilterKeydown(event) {
     if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      const firstVisibleId = visibleIds[0];
-      if (firstVisibleId) focusNode(firstVisibleId);
-      return;
+        event.preventDefault();
+        const firstVisibleId = visibleIds[0];
+        if (firstVisibleId)
+            focusNode(firstVisibleId);
+        return;
     }
-
     if (event.key === 'Escape' && currentFilterValue.length > 0) {
-      event.preventDefault();
-      event.stopPropagation();
-      updateFilterValue('');
-      filterInputElement?.focus();
+        event.preventDefault();
+        event.stopPropagation();
+        updateFilterValue('');
+        filterInputElement?.focus();
     }
-  }
-
-  function pointerTargetElement(
-    clientX: number,
-    clientY: number,
-    fallbackTarget: EventTarget | null,
-  ): HTMLElement | null {
+}
+function pointerTargetElement(clientX, clientY, fallbackTarget) {
     if (typeof document !== 'undefined') {
-      const element = document.elementFromPoint(clientX, clientY);
-      if (element instanceof HTMLElement) return element;
+        const element = document.elementFromPoint(clientX, clientY);
+        if (element instanceof HTMLElement)
+            return element;
     }
     return fallbackTarget instanceof HTMLElement ? fallbackTarget : null;
-  }
-
-  function updateDragTargetFromPointer(
-    clientX: number,
-    clientY: number,
-    fallbackTarget: EventTarget | null,
-  ): void {
+}
+function updateDragTargetFromPointer(clientX, clientY, fallbackTarget) {
     const element = pointerTargetElement(clientX, clientY, fallbackTarget);
-    if (!element) return;
+    if (!element)
+        return;
     dragController?.setDropTarget(dragController.targetFromPointer(clientY, element));
-  }
-
-  function stopDragAutoscroll(): void {
+}
+function stopDragAutoscroll() {
     if (dragScrollAnimationFrame !== null && typeof cancelAnimationFrame === 'function') {
-      cancelAnimationFrame(dragScrollAnimationFrame);
+        cancelAnimationFrame(dragScrollAnimationFrame);
     }
     dragScrollAnimationFrame = null;
     dragScrollElement = null;
-  }
-
-  function scheduleDragAutoscroll(): void {
-    if (
-      dragScrollAnimationFrame !== null ||
-      !dragController?.pointerDragging ||
-      !dragScrollElement ||
-      typeof requestAnimationFrame !== 'function'
-    ) {
-      return;
+}
+function scheduleDragAutoscroll() {
+    if (dragScrollAnimationFrame !== null ||
+        !dragController?.pointerDragging ||
+        !dragScrollElement ||
+        typeof requestAnimationFrame !== 'function') {
+        return;
     }
-
     dragScrollAnimationFrame = requestAnimationFrame(() => {
-      dragScrollAnimationFrame = null;
-      const tree = dragScrollElement;
-      if (!dragController?.pointerDragging || !tree) return;
-
-      const rect = tree.getBoundingClientRect();
-      const edge = 32;
-      const speed = 8;
-      const previousScrollTop = tree.scrollTop;
-      if (latestDragPointerY - rect.top < edge) {
-        tree.scrollTop -= speed;
-      } else if (rect.bottom - latestDragPointerY < edge) {
-        tree.scrollTop += speed;
-      }
-
-      if (tree.scrollTop === previousScrollTop) return;
-      updateDragTargetFromPointer(latestDragPointerX, latestDragPointerY, tree);
-      scheduleDragAutoscroll();
+        dragScrollAnimationFrame = null;
+        const tree = dragScrollElement;
+        if (!dragController?.pointerDragging || !tree)
+            return;
+        const rect = tree.getBoundingClientRect();
+        const edge = 32;
+        const speed = 8;
+        const previousScrollTop = tree.scrollTop;
+        if (latestDragPointerY - rect.top < edge) {
+            tree.scrollTop -= speed;
+        }
+        else if (rect.bottom - latestDragPointerY < edge) {
+            tree.scrollTop += speed;
+        }
+        if (tree.scrollTop === previousScrollTop)
+            return;
+        updateDragTargetFromPointer(latestDragPointerX, latestDragPointerY, tree);
+        scheduleDragAutoscroll();
     });
-  }
-
-  function handlePointerMove(event: PointerEvent): void {
-    if (!dragController?.pointerDragging) return;
+}
+function handlePointerMove(event) {
+    if (!dragController?.pointerDragging)
+        return;
     event.preventDefault();
     latestDragPointerX = event.clientX;
     latestDragPointerY = event.clientY;
-    dragScrollElement = event.currentTarget as HTMLElement;
+    dragScrollElement = event.currentTarget;
     updateDragTargetFromPointer(event.clientX, event.clientY, event.target);
     scheduleDragAutoscroll();
-  }
-
-  function handlePointerUp(event: PointerEvent): void {
-    if (!dragController?.pointerDragging) return;
+}
+function handlePointerUp(event) {
+    if (!dragController?.pointerDragging)
+        return;
     event.preventDefault();
     stopDragAutoscroll();
     dragController.drop();
-  }
-
-  function handlePointerCancel(): void {
-    if (!dragController?.pointerDragging) return;
+}
+function handlePointerCancel() {
+    if (!dragController?.pointerDragging)
+        return;
     stopDragAutoscroll();
     dragController.cancel();
-  }
-
-  function handleVirtualizedItemClick(item: FlattenedTreeDataItem, event: MouseEvent): void {
+}
+function handleVirtualizedItemClick(item, event) {
     focusedId = item.id;
     treeElement?.focus();
-    if (event.detail > 1) return;
-
-    if (!item.disabled) toggleSelectedInternal(item.id, event);
-
+    if (event.detail > 1)
+        return;
+    if (!item.disabled)
+        toggleSelectedInternal(item.id, event);
     if (item.branch && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
-      setExpandedInternal(item.id, !expandedIds.includes(item.id));
+        setExpandedInternal(item.id, !expandedIds.includes(item.id));
     }
-  }
-
-  function handleVirtualizedDisclosureClick(item: FlattenedTreeDataItem, event: MouseEvent): void {
+}
+function handleVirtualizedDisclosureClick(item, event) {
     event.stopPropagation();
     focusedId = item.id;
     treeElement?.focus();
     setExpandedInternal(item.id, !expandedIds.includes(item.id));
-  }
-
-  function syncVirtualizedCheckboxElement(element: HTMLInputElement, id: string): void {
+}
+function syncVirtualizedCheckboxElement(element, id) {
     const state = selectionStateForId(id);
     element.checked = state.checked;
     element.indeterminate = state.indeterminate && !state.checked;
-  }
-
-  function handleVirtualizedCheckboxClick(item: FlattenedTreeDataItem, event: MouseEvent): void {
+}
+function handleVirtualizedCheckboxClick(item, event) {
     event.stopPropagation();
     focusedId = item.id;
     treeElement?.focus();
     toggleSelectionScopeInternal(item.id);
-
     const checkbox = event.currentTarget;
     if (checkbox instanceof HTMLInputElement) {
-      syncVirtualizedCheckboxElement(checkbox, item.id);
+        syncVirtualizedCheckboxElement(checkbox, item.id);
     }
-  }
-
-  function activateVirtualizedItemFromKeyboard(
-    item: FlattenedTreeDataItem,
-    event: KeyboardEvent,
-  ): void {
+}
+function activateVirtualizedItemFromKeyboard(item, event) {
     if (item.branch && event.key === 'Enter') {
-      setExpandedInternal(item.id, !expandedIds.includes(item.id));
-      if (checkboxSelectionActive()) return;
+        setExpandedInternal(item.id, !expandedIds.includes(item.id));
+        if (checkboxSelectionActive())
+            return;
     }
-
     if (checkboxSelectionActive()) {
-      toggleSelectionScopeInternal(item.id);
-    } else {
-      toggleSelectedInternal(item.id, event);
+        toggleSelectionScopeInternal(item.id);
     }
-  }
-
-  function handleVirtualizedItemKeydown(item: FlattenedTreeDataItem, event: KeyboardEvent): void {
-    if (event.key !== 'Enter' && event.key !== ' ') return;
+    else {
+        toggleSelectedInternal(item.id, event);
+    }
+}
+function handleVirtualizedItemKeydown(item, event) {
+    if (event.key !== 'Enter' && event.key !== ' ')
+        return;
     event.preventDefault();
     event.stopPropagation();
     focusedId = item.id;
     treeElement?.focus();
     activateVirtualizedItemFromKeyboard(item, event);
-  }
+}
 </script>
 
 {#snippet virtualizedRows()}