@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/components/tree/index.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -54,7 +24,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/components/tree/index.ts
 import"@lostgradient/cinder/tree/styles";
 
-// src/components/_tree-select-all/tree-select-all.svelte
+// src/components/_tree-expand-all/tree-expand-all.svelte
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
@@ -83,63 +53,225 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
-// src/components/_tree-select-all/tree-select-all.svelte
-var root = $.from_html(`<div><span class="cinder-tree-select-all__label"> </span> <button type="button" class="cinder-tree-select-all__button"> </button> <button type="button" class="cinder-tree-select-all__button"> </button></div>`);
-function Tree_select_all($$anchor, $$props) {
+// src/components/_tree-expand-all/tree-expand-all.svelte
+var root_1 = $.from_html(`<button type="button" class="cinder-tree-expand-all__button"> </button>`);
+var root = $.from_html(`<div><span class="cinder-tree-expand-all__label"> </span> <!> <button type="button" class="cinder-tree-expand-all__button"> </button> <button type="button" class="cinder-tree-expand-all__button"> </button></div>`);
+function Tree_expand_all($$anchor, $$props) {
   $.push($$props, true);
-  let parentId = $.prop($$props, "parentId", 3, null), includeDescendants = $.prop($$props, "includeDescendants", 3, false), label = $.prop($$props, "label", 3, "Tree selection"), selectAllLabel = $.prop($$props, "selectAllLabel", 3, "Select all"), selectNoneLabel = $.prop($$props, "selectNoneLabel", 3, "Select none");
+  let label = $.prop($$props, "label", 3, "Tree expansion"), expandAllLabel = $.prop($$props, "expandAllLabel", 3, "Expand all"), expandOneLevelLabel = $.prop($$props, "expandOneLevelLabel", 3, "Expand one level"), collapseAllLabel = $.prop($$props, "collapseAllLabel", 3, "Collapse all"), safetyThreshold = $.prop($$props, "safetyThreshold", 3, 500);
   const context = getTreeContext();
-  const disabled = $.derived(() => !context.multiselectable || !context.hasSelectableSelectionScope(parentId(), includeDescendants()));
-  function selectAll() {
-    if (!$.get(disabled))
-      context.selectSelectionScope(parentId(), true, includeDescendants());
+  const expandDisabled = $.derived(() => context.expandableBranchCount === 0);
+  const collapseDisabled = $.derived(() => !context.hasExpandedItems);
+  const showSafetyValve = $.derived(() => context.expandableBranchCount > safetyThreshold());
+  function expandAll() {
+    if (!$.get(expandDisabled))
+      context.expandAll();
   }
-  function selectNone() {
-    if (!$.get(disabled))
-      context.selectSelectionScope(parentId(), false, includeDescendants());
+  function expandOneLevel() {
+    if (!$.get(expandDisabled))
+      context.expandOneLevel();
+  }
+  function collapseAll() {
+    if (!$.get(collapseDisabled))
+      context.collapseAll();
   }
   var div = root();
   var span = $.child(div);
   var text = $.child(span, true);
   $.reset(span);
-  var button = $.sibling(span, 2);
-  var text_1 = $.child(button, true);
-  $.reset(button);
-  var button_1 = $.sibling(button, 2);
+  var node = $.sibling(span, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var button = root_1();
+      var text_1 = $.child(button, true);
+      $.reset(button);
+      $.template_effect(() => {
+        $.set_attribute(button, "aria-label", `${expandOneLevelLabel()}: ${label()}`);
+        button.disabled = $.get(expandDisabled);
+        $.set_text(text_1, expandOneLevelLabel());
+      });
+      $.delegated("click", button, expandOneLevel);
+      $.append($$anchor2, button);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(showSafetyValve))
+        $$render(consequent);
+    });
+  }
+  var button_1 = $.sibling(node, 2);
   var text_2 = $.child(button_1, true);
   $.reset(button_1);
+  var button_2 = $.sibling(button_1, 2);
+  var text_3 = $.child(button_2, true);
+  $.reset(button_2);
   $.reset(div);
   $.template_effect(($0) => {
     $.set_class(div, 1, $0);
     $.set_text(text, label());
-    $.set_attribute(button, "aria-label", `${selectAllLabel()}: ${label()}`);
-    button.disabled = $.get(disabled);
-    $.set_text(text_1, selectAllLabel());
-    $.set_attribute(button_1, "aria-label", `${selectNoneLabel()}: ${label()}`);
-    button_1.disabled = $.get(disabled);
-    $.set_text(text_2, selectNoneLabel());
+    $.set_attribute(button_1, "aria-label", `${expandAllLabel()}: ${label()}`);
+    button_1.disabled = $.get(expandDisabled);
+    $.set_text(text_2, expandAllLabel());
+    $.set_attribute(button_2, "aria-label", `${collapseAllLabel()}: ${label()}`);
+    button_2.disabled = $.get(collapseDisabled);
+    $.set_text(text_3, collapseAllLabel());
   }, [
-    () => $.clsx(classNames("cinder-tree-select-all", $$props.class))
+    () => $.clsx(classNames("cinder-tree-expand-all", $$props.class))
   ]);
-  $.delegated("click", button, selectAll);
-  $.delegated("click", button_1, selectNone);
+  $.delegated("click", button_1, expandAll);
+  $.delegated("click", button_2, collapseAll);
   $.append($$anchor, div);
   $.pop();
 }
 $.delegate(["click"]);
 
-// src/components/tree-item/tree-item.svelte
+// src/components/_tree-select-all/tree-select-all.svelte
 import"svelte/internal/disclose-version";
 import * as $2 from "svelte/internal/client";
-import { untrack } from "svelte";
-var root_2 = $2.from_html(`<input type="checkbox" class="cinder-tree-item__checkbox" tabindex="-1" aria-hidden="true"/> <span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"> </span>`, 1);
-var root_3 = $2.from_html(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"> </span>`);
-var root_4 = $2.from_html(`<div role="group" class="cinder-tree-item__children"><!></div>`);
-var root2 = $2.from_html(`<div role="treeitem"><span class="cinder-sr-only"> </span> <div class="cinder-tree-item__row"><!></div> <!></div>`);
-function Tree_item($$anchor, $$props) {
-  const treeItemElementId = $2.props_id();
+var root2 = $2.from_html(`<div><span class="cinder-tree-select-all__label"> </span> <button type="button" class="cinder-tree-select-all__button"> </button> <button type="button" class="cinder-tree-select-all__button"> </button></div>`);
+function Tree_select_all($$anchor, $$props) {
   $2.push($$props, true);
-  let disabled = $2.prop($$props, "disabled", 3, false), branch = $2.prop($$props, "branch", 3, false);
+  let parentId = $2.prop($$props, "parentId", 3, null), includeDescendants = $2.prop($$props, "includeDescendants", 3, false), label = $2.prop($$props, "label", 3, "Tree selection"), selectAllLabel = $2.prop($$props, "selectAllLabel", 3, "Select all"), selectNoneLabel = $2.prop($$props, "selectNoneLabel", 3, "Select none");
+  const context = getTreeContext();
+  const disabled = $2.derived(() => !context.multiselectable || !context.hasSelectableSelectionScope(parentId(), includeDescendants()));
+  function selectAll() {
+    if (!$2.get(disabled))
+      context.selectSelectionScope(parentId(), true, includeDescendants());
+  }
+  function selectNone() {
+    if (!$2.get(disabled))
+      context.selectSelectionScope(parentId(), false, includeDescendants());
+  }
+  var div = root2();
+  var span = $2.child(div);
+  var text = $2.child(span, true);
+  $2.reset(span);
+  var button = $2.sibling(span, 2);
+  var text_1 = $2.child(button, true);
+  $2.reset(button);
+  var button_1 = $2.sibling(button, 2);
+  var text_2 = $2.child(button_1, true);
+  $2.reset(button_1);
+  $2.reset(div);
+  $2.template_effect(($0) => {
+    $2.set_class(div, 1, $0);
+    $2.set_text(text, label());
+    $2.set_attribute(button, "aria-label", `${selectAllLabel()}: ${label()}`);
+    button.disabled = $2.get(disabled);
+    $2.set_text(text_1, selectAllLabel());
+    $2.set_attribute(button_1, "aria-label", `${selectNoneLabel()}: ${label()}`);
+    button_1.disabled = $2.get(disabled);
+    $2.set_text(text_2, selectNoneLabel());
+  }, [
+    () => $2.clsx(classNames("cinder-tree-select-all", $$props.class))
+  ]);
+  $2.delegated("click", button, selectAll);
+  $2.delegated("click", button_1, selectNone);
+  $2.append($$anchor, div);
+  $2.pop();
+}
+$2.delegate(["click"]);
+
+// src/components/tree-item/tree-item.svelte
+import"svelte/internal/disclose-version";
+import * as $4 from "svelte/internal/client";
+import { tick, untrack } from "svelte";
+
+// src/components/_visually-hidden-live-region.svelte
+import"svelte/internal/disclose-version";
+import * as $3 from "svelte/internal/client";
+var root3 = $3.from_html(`<div aria-atomic="true"> </div>`);
+function _visually_hidden_live_region($$anchor, $$props) {
+  $3.push($$props, true);
+  let message = $3.prop($$props, "message", 3, ""), announcementSequence = $3.prop($$props, "announcementSequence", 3, 0), priority = $3.prop($$props, "priority", 3, "polite");
+  let rendered = $3.state("");
+  let setTimeoutId = null;
+  let version = 0;
+  let isDestroyed = false;
+  $3.user_effect(() => {
+    return () => {
+      isDestroyed = true;
+      if (setTimeoutId) {
+        clearTimeout(setTimeoutId);
+        setTimeoutId = null;
+      }
+    };
+  });
+  $3.user_effect(() => {
+    const next = message();
+    announcementSequence();
+    const current = ++version;
+    if (setTimeoutId) {
+      clearTimeout(setTimeoutId);
+      setTimeoutId = null;
+    }
+    $3.set(rendered, "");
+    if (next === "")
+      return;
+    setTimeoutId = setTimeout(() => {
+      if (isDestroyed || version !== current)
+        return;
+      $3.set(rendered, next, true);
+      setTimeoutId = null;
+    }, 0);
+  });
+  var div = root3();
+  var text = $3.child(div, true);
+  $3.reset(div);
+  $3.template_effect(($0) => {
+    $3.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
+    $3.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
+    $3.set_class(div, 1, $0);
+    $3.set_text(text, $3.get(rendered));
+  }, [() => $3.clsx(classNames("cinder-sr-only", $$props.class))]);
+  $3.append($$anchor, div);
+  $3.pop();
+}
+
+// src/components/tree-item/tree-item.svelte
+var root_4 = $4.from_html(`<mark aria-hidden="true" class="cinder-tree-item__highlight"> </mark>`);
+var root_6 = $4.from_html(`<button type="button" class="cinder-tree-item__disclosure" tabindex="-1"><span aria-hidden="true"></span></button>`);
+var root_7 = $4.from_html(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+var root_8 = $4.from_html(`<button type="button" class="cinder-tree-item__drag-handle" tabindex="-1"><span aria-hidden="true">::</span></button>`);
+var root_10 = $4.from_html(`<input type="text" class="cinder-tree-item__rename-input"/>`);
+var root_11 = $4.from_html(`<input type="checkbox" class="cinder-tree-item__checkbox" tabindex="-1" aria-hidden="true"/> <span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`, 1);
+var root_12 = $4.from_html(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`);
+var root_13 = $4.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_14 = $4.from_html(`<div role="group" class="cinder-tree-item__children"><!></div>`);
+var root_15 = $4.from_html(`<div role="treeitem"><span class="cinder-sr-only"> </span> <div class="cinder-tree-item__row"><!> <!> <!></div> <!> <!> <!></div>`);
+function Tree_item($$anchor, $$props) {
+  const treeItemElementId = $4.props_id();
+  $4.push($$props, true);
+  const visibleLabel = ($$anchor2) => {
+    var fragment = $4.comment();
+    var node_1 = $4.first_child(fragment);
+    $4.each(node_1, 17, () => $4.get(labelSegments), (segment) => `${segment.start}-${segment.highlighted}-${segment.text}`, ($$anchor3, segment) => {
+      var fragment_1 = $4.comment();
+      var node_2 = $4.first_child(fragment_1);
+      {
+        var consequent = ($$anchor4) => {
+          var mark = root_4();
+          var text2 = $4.child(mark, true);
+          $4.reset(mark);
+          $4.template_effect(() => $4.set_text(text2, $4.get(segment).text));
+          $4.append($$anchor4, mark);
+        };
+        var alternate = ($$anchor4) => {
+          var text_1 = $4.text();
+          $4.template_effect(() => $4.set_text(text_1, $4.get(segment).text));
+          $4.append($$anchor4, text_1);
+        };
+        $4.if(node_2, ($$render) => {
+          if ($4.get(segment).highlighted)
+            $$render(consequent);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $4.append($$anchor3, fragment_1);
+    });
+    $4.append($$anchor2, fragment);
+  };
+  let disabled = $4.prop($$props, "disabled", 3, false), draggable = $4.prop($$props, "draggable", 3, false), branch = $4.prop($$props, "branch", 3, false);
   const context = getTreeContext();
   const parentContext = tryGetTreeItemParentContext();
   const parentId = parentContext?.parentId ?? null;
@@ -152,31 +284,75 @@ function Tree_item($$anchor, $$props) {
       return level + 1;
     }
   });
-  const isBranch = $2.derived(() => branch() || $$props.loadChildren != null);
-  let busy = $2.state(false);
-  let loaded = $2.state(false);
+  const isBranch = $4.derived(() => branch() || $$props.loadChildren != null);
+  let busy = $4.state(false);
+  let loaded = $4.state(false);
   let activeController = null;
-  let outerElement = $2.state(undefined);
-  const isExpanded = $2.derived(() => context.expandedIds.includes($$props.id));
-  const isSelected = $2.derived(() => context.selectedIds.includes($$props.id));
-  const isFocused = $2.derived(() => context.focusedId === $$props.id);
-  const checkboxSelectionActive = $2.derived(() => context.checkboxSelectionActive());
-  const selectionState = $2.derived(() => context.selectionStateFor($$props.id));
-  const ariaChecked = $2.derived(() => {
-    if (!$2.get(checkboxSelectionActive))
-      return;
-    if ($2.get(selectionState).indeterminate)
+  let editing = $4.state(false);
+  let editValue = $4.state("");
+  let renamePending = $4.state(false);
+  let renameError = $4.state("");
+  let renameAnnouncement = $4.state("");
+  let renameAnnouncementSequence = $4.state(0);
+  let probedFilterValue = $4.state(null);
+  let outerElement = $4.state(undefined);
+  let renameInputElement = $4.state(undefined);
+  let dragHandleElement = $4.state(undefined);
+  let renameOwningTreeElement;
+  const renameMessageId = $4.derived(() => `${treeItemElementId}-rename-message`);
+  const isExpanded = $4.derived(() => context.expandedIds.includes($$props.id));
+  const isSelected = $4.derived(() => context.selectedIds.includes($$props.id));
+  const isFocused = $4.derived(() => context.focusedId === $$props.id);
+  const positionInSet = $4.derived(() => context.positionInSet($$props.id));
+  const setSize = $4.derived(() => context.setSize($$props.id));
+  const isFiltering = $4.derived(() => context.filtering);
+  const isVisible = $4.derived(() => !$4.get(isFiltering) || context.isVisible($$props.id) || !context.hasRegisteredItems && ($4.get(isBranch) || context.matchesFilter($$props.label, $$props.id)));
+  const hasVisibleDescendant = $4.derived(() => context.hasVisibleDescendant($$props.id));
+  const renderedExpanded = $4.derived(() => $4.get(isExpanded) || $4.get(isFiltering) && $4.get(hasVisibleDescendant));
+  const filterForcedOpen = $4.derived(() => $4.get(isBranch) && $4.get(isFiltering) && $4.get(hasVisibleDescendant) && !$4.get(isExpanded));
+  const shouldProbeFilterChildren = $4.derived(() => $4.get(isBranch) && $4.get(isFiltering) && !$4.get(isExpanded) && $4.get(probedFilterValue) !== context.filterValue);
+  const shouldRenderChildren = $4.derived(() => $4.get(isBranch) && ($4.get(isExpanded) || $4.get(hasVisibleDescendant) || $4.get(shouldProbeFilterChildren)));
+  const checkboxSelectionActive = $4.derived(() => context.checkboxSelectionActive());
+  const selectionState = $4.derived(() => context.selectionStateFor($$props.id));
+  const labelSegments = $4.derived(() => splitLabelForHighlight($$props.label, context.filterValue));
+  const canRename = $4.derived(() => !disabled() && $$props.onrename != null);
+  const editingLabel = $4.derived(() => `Editing: ${$$props.label}`);
+  const dragController = $4.derived(() => context.dragController);
+  const canDrag = $4.derived(() => draggable() && !disabled() && $4.get(dragController) != null);
+  const isDraggingItem = $4.derived(() => $4.get(dragController)?.isDragging($$props.id) ?? false);
+  const isDropBefore = $4.derived(() => $4.get(dragController)?.isDropTarget($$props.id, "before") ?? false);
+  const isDropAfter = $4.derived(() => $4.get(dragController)?.isDropTarget($$props.id, "after") ?? false);
+  const isDropInto = $4.derived(() => $4.get(dragController)?.isDropTarget($$props.id, "child") ?? false);
+  const dragHandleLabel = $4.derived(() => `Reorder ${$$props.label}`);
+  const ariaChecked = $4.derived(() => {
+    if (!$4.get(checkboxSelectionActive))
+      return;
+    if ($4.get(selectionState).indeterminate)
       return "mixed";
-    return $2.get(selectionState).checked ? "true" : "false";
+    return $4.get(selectionState).checked ? "true" : "false";
+  });
+  $4.user_effect(() => {
+    if (!$4.get(isFiltering)) {
+      $4.set(probedFilterValue, null);
+      return;
+    }
+    if (!$4.get(shouldProbeFilterChildren))
+      return;
+    const filterValueAtProbeStart = context.filterValue;
+    tick().then(() => {
+      if (context.filtering && context.filterValue === filterValueAtProbeStart) {
+        $4.set(probedFilterValue, filterValueAtProbeStart, true);
+      }
+    });
   });
-  let checkboxElement = $2.state(undefined);
+  let checkboxElement = $4.state(undefined);
   function syncCheckboxToSelectionState() {
-    if (!$2.get(checkboxElement))
+    if (!$4.get(checkboxElement))
       return;
-    $2.get(checkboxElement).checked = $2.get(selectionState).checked;
-    $2.get(checkboxElement).indeterminate = $2.get(selectionState).indeterminate && !$2.get(selectionState).checked;
+    $4.get(checkboxElement).checked = $4.get(selectionState).checked;
+    $4.get(checkboxElement).indeterminate = $4.get(selectionState).indeterminate && !$4.get(selectionState).checked;
   }
-  $2.user_effect(syncCheckboxToSelectionState);
+  $4.user_effect(syncCheckboxToSelectionState);
   const registerWithTree = (node) => {
     return untrack(() => {
       const unregister = context.register({
@@ -188,9 +364,10 @@ function Tree_item($$anchor, $$props) {
           return disabled();
         },
         selectionScopeIds: () => $$props.selectionScopeIds,
-        isBranch: () => $2.get(isBranch),
+        isBranch: () => $4.get(isBranch),
+        bulkExpandable: () => $$props.loadChildren == null,
         label: () => $$props.label,
-        focus: () => $2.get(outerElement)?.focus()
+        focus: () => $4.get(outerElement)?.focus()
       });
       return () => {
         if (activeController) {
@@ -202,44 +379,44 @@ function Tree_item($$anchor, $$props) {
     });
   };
   async function triggerLoad() {
-    if (!$$props.loadChildren || $2.get(loaded) || $2.get(busy))
+    if (!$$props.loadChildren || $4.get(loaded) || $4.get(busy))
       return;
     activeController?.abort();
     const controller = new AbortController;
     activeController = controller;
-    $2.set(busy, true);
+    $4.set(busy, true);
     try {
       await $$props.loadChildren({ id: $$props.id, signal: controller.signal });
       if (!controller.signal.aborted) {
-        $2.set(loaded, true);
-        $2.set(busy, false);
+        $4.set(loaded, true);
+        $4.set(busy, false);
       }
     } catch (error) {
       if (controller.signal.aborted || error instanceof DOMException && error.name === "AbortError") {
         if (activeController === controller)
-          $2.set(busy, false);
+          $4.set(busy, false);
         return;
       }
-      $2.set(busy, false);
-      $2.set(loaded, false);
+      $4.set(busy, false);
+      $4.set(loaded, false);
       context.setExpanded($$props.id, false);
-      if ($$props.onLoadError) {
-        $$props.onLoadError(error, $$props.id);
+      if ($$props.onloaderror) {
+        $$props.onloaderror(error, $$props.id);
       } else {
         console.error("[cinder-tree] loadChildren failed for item", $$props.id, error);
       }
     }
   }
-  $2.user_effect(() => {
-    if ($2.get(isExpanded) && $$props.loadChildren && !$2.get(loaded) && !$2.get(busy)) {
+  $4.user_effect(() => {
+    if ($4.get(isExpanded) && $$props.loadChildren && !$4.get(loaded) && !$4.get(busy)) {
       triggerLoad();
     }
   });
-  $2.user_effect(() => {
-    if (!$2.get(isExpanded) && $2.get(busy) && activeController) {
+  $4.user_effect(() => {
+    if (!$4.get(isExpanded) && $4.get(busy) && activeController) {
       activeController.abort();
       activeController = null;
-      $2.set(busy, false);
+      $4.set(busy, false);
     }
   });
   const INTERACTIVE_SELECTOR = 'button, a, input, select, textarea, [role="button"], [role="menuitem"], [role="checkbox"], [contenteditable]';
@@ -247,7 +424,7 @@ function Tree_item($$anchor, $$props) {
     if (!(target instanceof Element))
       return false;
     let node = target;
-    while (node && node !== $2.get(outerElement)) {
+    while (node && node !== $4.get(outerElement)) {
       if (node.matches(INTERACTIVE_SELECTOR))
         return true;
       node = node.parentElement;
@@ -259,12 +436,223 @@ function Tree_item($$anchor, $$props) {
     if (!(target instanceof Element))
       return false;
     const closestTreeItem = target.closest('[role="treeitem"]');
-    return closestTreeItem !== $2.get(outerElement);
+    return closestTreeItem !== $4.get(outerElement);
+  }
+  const focusRenameInput = (node) => {
+    $4.set(renameInputElement, node, true);
+    queueMicrotask(() => {
+      if (!$4.get(editing) || $4.get(renameInputElement) !== node)
+        return;
+      node.focus();
+      node.select();
+    });
+    return () => {
+      if ($4.get(renameInputElement) === node)
+        $4.set(renameInputElement, undefined);
+    };
+  };
+  function announceRename(message) {
+    $4.set(renameAnnouncement, message, true);
+    $4.set(renameAnnouncementSequence, $4.get(renameAnnouncementSequence) + 1);
+  }
+  function renameFailureMessage(error) {
+    if (error instanceof Error && error.message)
+      return error.message;
+    if (typeof error === "string" && error)
+      return error;
+    return "Unknown error";
+  }
+  function focusCurrentTreeItem() {
+    if ($4.get(outerElement)?.isConnected) {
+      $4.get(outerElement).focus();
+      renameOwningTreeElement = undefined;
+      return;
+    }
+    if (typeof document === "undefined")
+      return;
+    const root4 = renameOwningTreeElement?.isConnected === true ? renameOwningTreeElement : document;
+    const current = [...root4.querySelectorAll("[data-cinder-tree-item-id]")].find((element) => element.dataset["cinderTreeItemId"] === $$props.id);
+    current?.focus();
+    renameOwningTreeElement = undefined;
+  }
+  function beginEdit() {
+    if (!$4.get(canRename) || $4.get(editing))
+      return;
+    $4.set(editValue, $$props.label, true);
+    $4.set(renameError, "");
+    $4.set(renamePending, false);
+    renameOwningTreeElement = $4.get(outerElement)?.closest('[role="tree"]') ?? undefined;
+    $4.set(editing, true);
+    announceRename(`Editing ${$$props.label}. Press Enter to confirm, Escape to cancel.`);
+  }
+  function finishEdit(afterFocus = undefined) {
+    $4.set(editing, false);
+    $4.set(renameError, "");
+    $4.set(renamePending, false);
+    queueMicrotask(() => {
+      focusCurrentTreeItem();
+      afterFocus?.();
+    });
+  }
+  function cancelEdit() {
+    $4.set(editValue, $$props.label, true);
+    announceRename("Rename cancelled.");
+    finishEdit();
+  }
+  async function commitEdit(afterFocus = undefined) {
+    if (!$4.get(editing) || $4.get(renamePending))
+      return false;
+    if ($4.get(editValue).trim().length === 0) {
+      $4.set(renameError, "Label is required.");
+      announceRename($4.get(renameError));
+      queueMicrotask(() => $4.get(renameInputElement)?.focus());
+      return false;
+    }
+    if (!$$props.onrename) {
+      finishEdit(afterFocus);
+      return true;
+    }
+    $4.set(renamePending, true);
+    $4.set(renameError, "");
+    try {
+      await $$props.onrename($$props.id, $4.get(editValue));
+      announceRename(`${$4.get(editValue)}, renamed.`);
+      finishEdit(afterFocus);
+      return true;
+    } catch (error) {
+      const message = `Rename failed: ${renameFailureMessage(error)}.`;
+      $4.set(renamePending, false);
+      $4.set(renameError, message);
+      announceRename(message);
+      queueMicrotask(() => $4.get(renameInputElement)?.focus());
+      return false;
+    }
+  }
+  async function commitEditAndMove(direction) {
+    await commitEdit(() => context.focusVisibleDelta($$props.id, direction));
+  }
+  function handleRenameInputKeydown(event2) {
+    event2.stopPropagation();
+    if (event2.key === "Enter") {
+      event2.preventDefault();
+      commitEdit();
+      return;
+    }
+    if (event2.key === "Escape") {
+      event2.preventDefault();
+      cancelEdit();
+      return;
+    }
+    if (event2.key === "Tab") {
+      const direction = event2.shiftKey ? -1 : 1;
+      if (context.canFocusVisibleDelta($$props.id, direction)) {
+        event2.preventDefault();
+        commitEditAndMove(direction);
+      } else {
+        commitEdit();
+      }
+    }
+  }
+  function handleRenameInputBlur() {
+    commitEdit();
+  }
+  let dragKeyboardReturnTarget;
+  function restoreDragKeyboardFocus() {
+    const target = dragKeyboardReturnTarget ?? $4.get(dragHandleElement) ?? $4.get(outerElement);
+    queueMicrotask(() => target?.focus());
+  }
+  function canLiftWithKeyboard(event2) {
+    const fromDragHandle = event2.currentTarget === $4.get(dragHandleElement);
+    const treeItemShortcut = event2.key === " " && event2.ctrlKey && event2.shiftKey && !event2.altKey && !event2.metaKey;
+    return fromDragHandle && (event2.key === " " || event2.key === "Enter") || treeItemShortcut;
+  }
+  function handleDragKeyboard(event2) {
+    const controller = $4.get(dragController);
+    if (!$4.get(canDrag) || !controller)
+      return false;
+    if (!controller.dragging && canLiftWithKeyboard(event2)) {
+      event2.preventDefault();
+      event2.stopPropagation();
+      dragKeyboardReturnTarget = event2.currentTarget instanceof HTMLElement ? event2.currentTarget : undefined;
+      controller.lift($$props.id, "keyboard");
+      restoreDragKeyboardFocus();
+      return true;
+    }
+    if (!controller.isDragging($$props.id))
+      return false;
+    switch (event2.key) {
+      case "ArrowDown":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.moveBy(1);
+        return true;
+      case "ArrowUp":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.moveBy(-1);
+        return true;
+      case "ArrowRight":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.moveIntoPreviousBranch();
+        return true;
+      case "ArrowLeft":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.moveOut();
+        return true;
+      case "Home":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.moveToEdge("first");
+        return true;
+      case "End":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.moveToEdge("last");
+        return true;
+      case "F2":
+        event2.preventDefault();
+        event2.stopPropagation();
+        return true;
+      case "Tab":
+        event2.stopPropagation();
+        controller.cancel();
+        return true;
+      case " ":
+      case "Enter":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.drop();
+        restoreDragKeyboardFocus();
+        return true;
+      case "Escape":
+        event2.preventDefault();
+        event2.stopPropagation();
+        controller.cancel();
+        restoreDragKeyboardFocus();
+        return true;
+      default:
+        return false;
+    }
+  }
+  function handleDragPointerDown(event2) {
+    const controller = $4.get(dragController);
+    if (!$4.get(canDrag) || !controller || event2.button !== 0)
+      return;
+    event2.preventDefault();
+    event2.stopPropagation();
+    $4.get(dragHandleElement)?.focus();
+    $4.get(dragHandleElement)?.setPointerCapture(event2.pointerId);
+    controller.lift($$props.id, "pointer");
+  }
+  function handleDragClick(event2) {
+    event2.stopPropagation();
   }
   function toggleKeyboardSelection(event2) {
     if (disabled())
       return;
-    if ($2.get(checkboxSelectionActive)) {
+    if ($4.get(checkboxSelectionActive)) {
       context.toggleSelectionScope($$props.id);
     } else {
       context.toggleSelected($$props.id, event2);
@@ -276,6 +664,13 @@ function Tree_item($$anchor, $$props) {
     if (isInteractiveDescendant(event2.target))
       return;
     const key = event2.key;
+    if (handleDragKeyboard(event2))
+      return;
+    if (key === "F2") {
+      event2.preventDefault();
+      beginEdit();
+      return;
+    }
     switch (key) {
       case "ArrowDown":
         event2.preventDefault();
@@ -297,9 +692,9 @@ function Tree_item($$anchor, $$props) {
         break;
       case "ArrowRight":
         event2.preventDefault();
-        if (!$2.get(isBranch))
+        if (!$4.get(isBranch))
           break;
-        if (!$2.get(isExpanded)) {
+        if (!$4.get(renderedExpanded)) {
           context.setExpanded($$props.id, true);
         } else {
           context.focusFirstChild($$props.id);
@@ -307,7 +702,7 @@ function Tree_item($$anchor, $$props) {
         break;
       case "ArrowLeft":
         event2.preventDefault();
-        if ($2.get(isBranch) && $2.get(isExpanded)) {
+        if ($4.get(isBranch) && $4.get(isExpanded)) {
           context.setExpanded($$props.id, false);
         } else {
           context.focusParent($$props.id);
@@ -323,23 +718,27 @@ function Tree_item($$anchor, $$props) {
         break;
       case "Enter":
         event2.preventDefault();
-        if ($2.get(checkboxSelectionActive)) {
-          if ($2.get(isBranch)) {
-            context.setExpanded($$props.id, !$2.get(isExpanded));
+        if (context.selectionMode === "none" && $4.get(canRename)) {
+          beginEdit();
+          break;
+        }
+        if ($4.get(checkboxSelectionActive)) {
+          if ($4.get(isBranch)) {
+            context.setExpanded($$props.id, !$4.get(isExpanded));
           } else if (!disabled()) {
             context.toggleSelectionScope($$props.id);
           }
         } else {
           if (!disabled())
             context.toggleSelected($$props.id, event2);
-          if ($2.get(isBranch))
-            context.setExpanded($$props.id, !$2.get(isExpanded));
+          if ($4.get(isBranch))
+            context.setExpanded($$props.id, !$4.get(isExpanded));
         }
         break;
       case " ":
         event2.preventDefault();
         if (!disabled()) {
-          if ($2.get(checkboxSelectionActive)) {
+          if ($4.get(checkboxSelectionActive)) {
             context.toggleSelectionScope($$props.id);
           } else {
             context.toggleSelected($$props.id, event2);
@@ -366,17 +765,34 @@ function Tree_item($$anchor, $$props) {
       return;
     if (isInteractiveDescendant(event2.target))
       return;
-    $2.get(outerElement)?.focus();
-    if (!disabled() && !$2.get(checkboxSelectionActive))
+    $4.get(outerElement)?.focus();
+    if (event2.detail > 1)
+      return;
+    if (disabled()) {
+      if ($4.get(isBranch))
+        context.setExpanded($$props.id, !$4.get(isExpanded));
+      return;
+    }
+    if (!$4.get(checkboxSelectionActive))
       context.toggleSelected($$props.id, event2);
-    if ($2.get(isBranch) && !event2.shiftKey && !event2.metaKey && !event2.ctrlKey) {
-      context.setExpanded($$props.id, !$2.get(isExpanded));
+    if ($4.get(isBranch) && !event2.shiftKey && !event2.metaKey && !event2.ctrlKey) {
+      context.setExpanded($$props.id, !$4.get(isExpanded));
     }
   }
+  function handleDisclosureClick(event2) {
+    event2.stopPropagation();
+    $4.get(outerElement)?.focus();
+    context.setExpanded($$props.id, !$4.get(isExpanded));
+  }
+  function handleLabelDoubleClick(event2) {
+    event2.preventDefault();
+    event2.stopPropagation();
+    beginEdit();
+  }
   function handleCheckboxActivation(event2) {
     event2.preventDefault();
     event2.stopPropagation();
-    $2.get(outerElement)?.focus();
+    $4.get(outerElement)?.focus();
     if (!disabled())
       context.toggleSelectionScope($$props.id);
     if (typeof globalThis.requestAnimationFrame === "function") {
@@ -387,132 +803,556 @@ function Tree_item($$anchor, $$props) {
     if (!disabled())
       context.toggleSelectionScope($$props.id);
   }
-  var div = root2();
-  var span = $2.child(div);
-  var text = $2.child(span, true);
-  $2.reset(span);
-  var div_1 = $2.sibling(span, 2);
-  var node_1 = $2.child(div_1);
+  function splitLabelForHighlight(value, query) {
+    if (query.length === 0)
+      return [{ text: value, highlighted: false, start: 0 }];
+    const matchIndex = value.toLowerCase().indexOf(query.toLowerCase());
+    if (matchIndex === -1)
+      return [{ text: value, highlighted: false, start: 0 }];
+    const matchEnd = matchIndex + query.length;
+    const segments = [];
+    if (matchIndex > 0) {
+      segments.push({
+        text: value.slice(0, matchIndex),
+        highlighted: false,
+        start: 0
+      });
+    }
+    segments.push({
+      text: value.slice(matchIndex, matchEnd),
+      highlighted: true,
+      start: matchIndex
+    });
+    if (matchEnd < value.length) {
+      segments.push({
+        text: value.slice(matchEnd),
+        highlighted: false,
+        start: matchEnd
+      });
+    }
+    return segments;
+  }
+  var div = root_15();
+  var span = $4.child(div);
+  var text_2 = $4.child(span, true);
+  $4.reset(span);
+  var div_1 = $4.sibling(span, 2);
+  var node_3 = $4.child(div_1);
   {
-    var consequent = ($$anchor2) => {
-      var fragment = $2.comment();
-      var node_2 = $2.first_child(fragment);
-      $2.snippet(node_2, () => $$props.row, () => ({
-        expanded: $2.get(isExpanded),
-        selected: $2.get(isSelected),
-        busy: $2.get(busy),
+    var consequent_1 = ($$anchor2) => {
+      var button = root_6();
+      $4.template_effect(() => {
+        $4.set_attribute(button, "aria-label", `${$4.get(renderedExpanded) ? "Collapse" : "Expand"} ${$$props.label}`);
+        $4.set_attribute(button, "aria-expanded", $4.get(renderedExpanded));
+      });
+      $4.delegated("click", button, handleDisclosureClick);
+      $4.append($$anchor2, button);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var span_1 = root_7();
+      $4.append($$anchor2, span_1);
+    };
+    $4.if(node_3, ($$render) => {
+      if ($4.get(isBranch) && !$4.get(filterForcedOpen))
+        $$render(consequent_1);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  var node_4 = $4.sibling(node_3, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var button_1 = root_8();
+      $4.bind_this(button_1, ($$value) => $4.set(dragHandleElement, $$value), () => $4.get(dragHandleElement));
+      $4.template_effect(() => {
+        $4.set_attribute(button_1, "aria-label", $4.get(dragHandleLabel));
+        $4.set_attribute(button_1, "aria-pressed", $4.get(isDraggingItem));
+        $4.set_attribute(button_1, "aria-describedby", context.dragInstructionsId);
+      });
+      $4.delegated("pointerdown", button_1, handleDragPointerDown);
+      $4.event("click", button_1, handleDragClick, true);
+      $4.delegated("keydown", button_1, handleDragKeyboard);
+      $4.append($$anchor2, button_1);
+    };
+    $4.if(node_4, ($$render) => {
+      if ($4.get(canDrag))
+        $$render(consequent_2);
+    });
+  }
+  var node_5 = $4.sibling(node_4, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var fragment_3 = $4.comment();
+      var node_6 = $4.first_child(fragment_3);
+      $4.snippet(node_6, () => $$props.row, () => ({
+        expanded: $4.get(isExpanded),
+        selected: $4.get(isSelected),
+        busy: $4.get(busy),
         level,
-        checkboxSelection: $2.get(checkboxSelectionActive),
-        selectionState: $2.get(selectionState),
+        checkboxSelection: $4.get(checkboxSelectionActive),
+        selectionState: $4.get(selectionState),
+        editing: $4.get(editing),
+        beginEdit,
         toggleSelection: toggleSelectionFromRow
       }));
-      $2.append($$anchor2, fragment);
+      $4.append($$anchor2, fragment_3);
     };
-    var consequent_1 = ($$anchor2) => {
-      var fragment_1 = root_2();
-      var input = $2.first_child(fragment_1);
-      $2.remove_input_defaults(input);
-      $2.bind_this(input, ($$value) => $2.set(checkboxElement, $$value), () => $2.get(checkboxElement));
-      var span_1 = $2.sibling(input, 2);
-      var text_1 = $2.child(span_1, true);
-      $2.reset(span_1);
-      $2.template_effect(() => {
-        $2.set_checked(input, $2.get(selectionState).checked);
-        input.disabled = disabled();
-        $2.set_text(text_1, $$props.label);
+    var consequent_4 = ($$anchor2) => {
+      var input = root_10();
+      $4.remove_input_defaults(input);
+      $4.attach(input, () => focusRenameInput);
+      $4.template_effect(() => {
+        $4.set_attribute(input, "aria-label", $4.get(editingLabel));
+        $4.set_attribute(input, "aria-invalid", $4.get(renameError) ? "true" : undefined);
+        $4.set_attribute(input, "aria-describedby", $4.get(renameError) ? $4.get(renameMessageId) : undefined);
+        input.disabled = $4.get(renamePending);
       });
-      $2.delegated("click", input, handleCheckboxActivation);
-      $2.append($$anchor2, fragment_1);
+      $4.delegated("keydown", input, handleRenameInputKeydown);
+      $4.event("blur", input, handleRenameInputBlur);
+      $4.bind_value(input, () => $4.get(editValue), ($$value) => $4.set(editValue, $$value));
+      $4.append($$anchor2, input);
     };
-    var alternate = ($$anchor2) => {
-      var span_2 = root_3();
-      var text_2 = $2.child(span_2, true);
-      $2.reset(span_2);
-      $2.template_effect(() => $2.set_text(text_2, $$props.label));
-      $2.append($$anchor2, span_2);
+    var consequent_5 = ($$anchor2) => {
+      var fragment_4 = root_11();
+      var input_1 = $4.first_child(fragment_4);
+      $4.remove_input_defaults(input_1);
+      $4.bind_this(input_1, ($$value) => $4.set(checkboxElement, $$value), () => $4.get(checkboxElement));
+      var span_2 = $4.sibling(input_1, 2);
+      var node_7 = $4.child(span_2);
+      visibleLabel(node_7);
+      $4.reset(span_2);
+      $4.template_effect(() => {
+        $4.set_checked(input_1, $4.get(selectionState).checked);
+        input_1.disabled = disabled();
+      });
+      $4.delegated("click", input_1, handleCheckboxActivation);
+      $4.delegated("dblclick", span_2, handleLabelDoubleClick);
+      $4.append($$anchor2, fragment_4);
+    };
+    var alternate_2 = ($$anchor2) => {
+      var span_3 = root_12();
+      var node_8 = $4.child(span_3);
+      visibleLabel(node_8);
+      $4.reset(span_3);
+      $4.delegated("dblclick", span_3, handleLabelDoubleClick);
+      $4.append($$anchor2, span_3);
     };
-    $2.if(node_1, ($$render) => {
+    $4.if(node_5, ($$render) => {
       if ($$props.row)
-        $$render(consequent);
-      else if ($2.get(checkboxSelectionActive))
-        $$render(consequent_1, 1);
+        $$render(consequent_3);
+      else if ($4.get(editing))
+        $$render(consequent_4, 1);
+      else if ($4.get(checkboxSelectionActive))
+        $$render(consequent_5, 2);
       else
-        $$render(alternate, -1);
+        $$render(alternate_2, -1);
     });
   }
-  $2.reset(div_1);
-  var node_3 = $2.sibling(div_1, 2);
+  $4.reset(div_1);
+  var node_9 = $4.sibling(div_1, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var div_2 = root_4();
-      var node_4 = $2.child(div_2);
-      $2.snippet(node_4, () => $$props.children ?? $2.noop);
-      $2.reset(div_2);
-      $2.template_effect(() => $2.set_attribute(div_2, "aria-labelledby", treeItemElementId));
-      $2.append($$anchor2, div_2);
-    };
-    $2.if(node_3, ($$render) => {
-      if ($2.get(isBranch) && $2.get(isExpanded))
-        $$render(consequent_2);
+    var consequent_6 = ($$anchor2) => {
+      var span_4 = root_13();
+      var text_3 = $4.child(span_4, true);
+      $4.reset(span_4);
+      $4.template_effect(() => {
+        $4.set_attribute(span_4, "id", $4.get(renameMessageId));
+        $4.set_text(text_3, $4.get(renameError));
+      });
+      $4.append($$anchor2, span_4);
+    };
+    $4.if(node_9, ($$render) => {
+      if ($4.get(renameError))
+        $$render(consequent_6);
     });
   }
-  $2.reset(div);
-  $2.bind_this(div, ($$value) => $2.set(outerElement, $$value), () => $2.get(outerElement));
-  $2.attach(div, () => registerWithTree);
-  $2.template_effect(($0) => {
-    $2.set_attribute(div, "id", treeItemElementId);
-    $2.set_class(div, 1, $0);
-    $2.set_attribute(div, "aria-labelledby", `${treeItemElementId}-label`);
-    $2.set_attribute(div, "aria-level", level);
-    $2.set_attribute(div, "aria-expanded", $2.get(isBranch) ? $2.get(isExpanded) : undefined);
-    $2.set_attribute(div, "aria-selected", context.selectionMode === "none" || $2.get(checkboxSelectionActive) ? undefined : $2.get(isSelected));
-    $2.set_attribute(div, "aria-checked", $2.get(ariaChecked));
-    $2.set_attribute(div, "aria-busy", $2.get(busy) || undefined);
-    $2.set_attribute(div, "aria-disabled", disabled() || undefined);
-    $2.set_attribute(div, "tabindex", $2.get(isFocused) ? 0 : -1);
-    $2.set_attribute(div, "data-cinder-expanded", $2.get(isBranch) && $2.get(isExpanded) ? "" : undefined);
-    $2.set_attribute(div, "data-cinder-selected", $2.get(isSelected) ? "" : undefined);
-    $2.set_attribute(div, "data-cinder-disabled", disabled() ? "" : undefined);
-    $2.set_attribute(div, "data-cinder-busy", $2.get(busy) ? "" : undefined);
-    $2.set_attribute(span, "id", `${treeItemElementId}-label`);
-    $2.set_text(text, $$props.label);
-  }, [() => $2.clsx(classNames("cinder-tree-item", $$props.class))]);
-  $2.event("focus", div, handleFocus);
-  $2.delegated("keydown", div, handleKeydown);
-  $2.delegated("click", div, handleClick);
-  $2.append($$anchor, div);
-  $2.pop();
+  var node_10 = $4.sibling(node_9, 2);
+  {
+    var consequent_7 = ($$anchor2) => {
+      var div_2 = root_14();
+      var node_11 = $4.child(div_2);
+      $4.snippet(node_11, () => $$props.children ?? $4.noop);
+      $4.reset(div_2);
+      $4.template_effect(() => $4.set_attribute(div_2, "aria-labelledby", treeItemElementId));
+      $4.append($$anchor2, div_2);
+    };
+    $4.if(node_10, ($$render) => {
+      if ($4.get(shouldRenderChildren))
+        $$render(consequent_7);
+    });
+  }
+  var node_12 = $4.sibling(node_10, 2);
+  {
+    var consequent_8 = ($$anchor2) => {
+      _visually_hidden_live_region($$anchor2, {
+        get message() {
+          return $4.get(renameAnnouncement);
+        },
+        get announcementSequence() {
+          return $4.get(renameAnnouncementSequence);
+        },
+        priority: "assertive"
+      });
+    };
+    $4.if(node_12, ($$render) => {
+      if ($$props.onrename)
+        $$render(consequent_8);
+    });
+  }
+  $4.reset(div);
+  $4.bind_this(div, ($$value) => $4.set(outerElement, $$value), () => $4.get(outerElement));
+  $4.attach(div, () => registerWithTree);
+  $4.template_effect(($0) => {
+    $4.set_attribute(div, "id", treeItemElementId);
+    $4.set_class(div, 1, $0);
+    $4.set_attribute(div, "aria-label", $4.get(editing) ? $4.get(editingLabel) : undefined);
+    $4.set_attribute(div, "aria-labelledby", $4.get(editing) ? undefined : `${treeItemElementId}-label`);
+    $4.set_attribute(div, "aria-level", level);
+    $4.set_attribute(div, "aria-expanded", $4.get(isBranch) ? $4.get(renderedExpanded) : undefined);
+    $4.set_attribute(div, "aria-posinset", $4.get(positionInSet));
+    $4.set_attribute(div, "aria-setsize", $4.get(setSize));
+    $4.set_attribute(div, "aria-selected", context.selectionMode === "none" || $4.get(checkboxSelectionActive) ? undefined : $4.get(isSelected));
+    $4.set_attribute(div, "aria-checked", $4.get(ariaChecked));
+    $4.set_attribute(div, "aria-busy", $4.get(busy) || undefined);
+    $4.set_attribute(div, "aria-disabled", disabled() || undefined);
+    $4.set_attribute(div, "aria-describedby", $4.get(canDrag) ? context.dragInstructionsId : undefined);
+    $4.set_attribute(div, "tabindex", $4.get(isFocused) ? 0 : -1);
+    $4.set_attribute(div, "data-cinder-expanded", $4.get(isBranch) && $4.get(isExpanded) ? "" : undefined);
+    $4.set_attribute(div, "data-cinder-selected", $4.get(isSelected) ? "" : undefined);
+    $4.set_attribute(div, "data-cinder-disabled", disabled() ? "" : undefined);
+    $4.set_attribute(div, "data-cinder-busy", $4.get(busy) ? "" : undefined);
+    $4.set_attribute(div, "data-cinder-hidden", !$4.get(isVisible) ? "" : undefined);
+    $4.set_attribute(div, "data-cinder-editing", $4.get(editing) ? "" : undefined);
+    $4.set_attribute(div, "data-cinder-tree-item-id", $$props.id);
+    $4.set_attribute(div, "data-cinder-dragging", $4.get(isDraggingItem) ? "" : undefined);
+    $4.set_attribute(div, "data-cinder-drop-target", $4.get(isDropBefore) ? "before" : $4.get(isDropAfter) ? "after" : undefined);
+    $4.set_attribute(div, "data-cinder-drop-into", $4.get(isDropInto) ? "" : undefined);
+    $4.set_attribute(span, "id", `${treeItemElementId}-label`);
+    $4.set_text(text_2, $$props.label);
+  }, [() => $4.clsx(classNames("cinder-tree-item", $$props.class))]);
+  $4.event("focus", div, handleFocus);
+  $4.delegated("keydown", div, handleKeydown);
+  $4.delegated("click", div, handleClick);
+  $4.append($$anchor, div);
+  $4.pop();
 }
-$2.delegate(["keydown", "click"]);
+$4.delegate(["keydown", "click", "pointerdown", "dblclick"]);
 
 // src/components/tree/tree.svelte
 import"svelte/internal/disclose-version";
-import * as $4 from "svelte/internal/client";
+import * as $8 from "svelte/internal/client";
+import { tick as tick2, untrack as untrack2 } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
 
-// src/_internal/tree-registry.svelte.ts
-import * as $3 from "svelte/internal/client";
-import { SvelteMap } from "svelte/reactivity";
+// src/_internal/tree-data.ts
+function flattenTreeDataItems(items) {
+  const flattenedItems = [];
+  const visit = (children, parentId, level, ancestorIds) => {
+    const setSize = children.length;
+    children.forEach((item, siblingIndex) => {
+      const branch = (item.children?.length ?? 0) > 0;
+      const flattenedItem = {
+        id: item.id,
+        label: item.label,
+        disabled: item.disabled ?? false,
+        parentId,
+        level,
+        branch,
+        index: flattenedItems.length,
+        posInSet: siblingIndex + 1,
+        setSize,
+        ancestorIds
+      };
+      flattenedItems.push(flattenedItem);
+      if (branch) {
+        visit(item.children ?? [], item.id, level + 1, [...ancestorIds, item.id]);
+      }
+    });
+  };
+  visit(items, null, 1, []);
+  return flattenedItems;
+}
+function visibleTreeDataItems(flattenedItems, expandedIds, filterPredicate) {
+  if (filterPredicate) {
+    const byId = new Map(flattenedItems.map((item) => [item.id, item]));
+    const retainedIds = new Set;
+    for (const item of flattenedItems) {
+      if (!filterPredicate(item))
+        continue;
+      retainedIds.add(item.id);
+      for (const ancestorId of item.ancestorIds) {
+        if (byId.has(ancestorId))
+          retainedIds.add(ancestorId);
+      }
+    }
+    return flattenedItems.filter((item) => retainedIds.has(item.id));
+  }
+  const expandedIdSet = new Set(expandedIds);
+  return flattenedItems.filter((item) => item.ancestorIds.every((ancestorId) => expandedIdSet.has(ancestorId)));
+}
+function descendantTreeDataIds(flattenedItems, parentId) {
+  const parent = flattenedItems.find((item) => item.id === parentId);
+  if (!parent)
+    return [];
+  return flattenedItems.filter((item) => item.ancestorIds.includes(parentId) && item.level > parent.level).map((item) => item.id);
+}
 
-// src/utilities/document-order.ts
-function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
-    if (a.node === b.node)
-      return 0;
-    const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
-      return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
-      return 1;
-    return 0;
-  });
+// src/_internal/tree-drag-controller.svelte.ts
+import * as $5 from "svelte/internal/client";
+function reversedVisibleIds(visibleIds) {
+  const reversedIds = [];
+  for (let index = visibleIds.length - 1;index >= 0; index -= 1) {
+    const id = visibleIds[index];
+    if (id !== undefined)
+      reversedIds.push(id);
+  }
+  return reversedIds;
 }
 
-// src/_internal/tree-registry.svelte.ts
-class TreeRegistry {
-  #nodes = new SvelteMap;
-  #children = new SvelteMap;
-  register(node) {
-    if (this.#nodes.has(node.id)) {
+class TreeDragController {
+  #phase = $5.state("idle");
+  get phase() {
+    return $5.get(this.#phase);
+  }
+  set phase(value) {
+    $5.set(this.#phase, value, true);
+  }
+  #draggedId = $5.state(null);
+  get draggedId() {
+    return $5.get(this.#draggedId);
+  }
+  set draggedId(value) {
+    $5.set(this.#draggedId, value, true);
+  }
+  #dropTarget = $5.state(null);
+  get dropTarget() {
+    return $5.get(this.#dropTarget);
+  }
+  set dropTarget(value) {
+    $5.set(this.#dropTarget, value, true);
+  }
+  #dragSource = $5.state(null);
+  get dragSource() {
+    return $5.get(this.#dragSource);
+  }
+  set dragSource(value) {
+    $5.set(this.#dragSource, value, true);
+  }
+  #options;
+  constructor(options) {
+    this.#options = options;
+  }
+  get dragging() {
+    return this.phase === "dragging";
+  }
+  get pointerDragging() {
+    return this.dragging && this.dragSource === "pointer";
+  }
+  isDragging(id) {
+    return this.draggedId === id;
+  }
+  isDropTarget(id, position) {
+    if (this.dropTarget?.id !== id)
+      return false;
+    return position === undefined || this.dropTarget.position === position;
+  }
+  lift(id, source) {
+    if (this.phase !== "idle")
+      return;
+    this.phase = "dragging";
+    this.draggedId = id;
+    this.dropTarget = null;
+    this.dragSource = source;
+    const visibleIds = this.#options.getVisibleIds();
+    const position = Math.max(1, visibleIds.indexOf(id) + 1);
+    this.#options.announce(`${this.#labelFor(id)}, lifted. Position ${position} of ${visibleIds.length} ${this.#parentPhrase(id)}. Arrow keys to move, Space to drop, Escape to cancel.`);
+  }
+  moveBy(delta) {
+    if (this.phase !== "dragging" || !this.draggedId)
+      return;
+    const visibleIds = this.#options.getVisibleIds();
+    if (visibleIds.length === 0)
+      return;
+    const currentId = this.dropTarget?.id ?? this.draggedId;
+    const currentIndex = this.#currentVisibleIndex(currentId, visibleIds);
+    if (currentIndex < 0)
+      return;
+    let nextIndex = currentIndex + delta;
+    while (nextIndex >= 0 && nextIndex < visibleIds.length) {
+      const nextId = visibleIds[nextIndex];
+      const target = nextId ? { id: nextId, position: delta > 0 ? "after" : "before" } : null;
+      if (target && this.#setValidDropTarget(target)) {
+        this.#options.announce(`${this.#labelFor(this.draggedId)}, moved ${this.#targetPhrase(target)}.`);
+        return;
+      }
+      nextIndex += delta;
+    }
+  }
+  moveToEdge(edge) {
+    if (this.phase !== "dragging" || !this.draggedId)
+      return;
+    const visibleIds = this.#options.getVisibleIds();
+    const candidates = edge === "first" ? visibleIds : reversedVisibleIds(visibleIds);
+    for (const targetId of candidates) {
+      const target = {
+        id: targetId,
+        position: edge === "first" ? "before" : "after"
+      };
+      if (this.#setValidDropTarget(target)) {
+        this.#options.announce(`${this.#labelFor(this.draggedId)}, moved ${this.#targetPhrase(target)}.`);
+        return;
+      }
+    }
+  }
+  moveIntoPreviousBranch() {
+    if (this.phase !== "dragging" || !this.draggedId)
+      return;
+    const visibleIds = this.#options.getVisibleIds();
+    const currentId = this.dropTarget?.id ?? this.draggedId;
+    const currentIndex = this.#currentVisibleIndex(currentId, visibleIds);
+    if (currentIndex < 0)
+      return;
+    const before = reversedVisibleIds(visibleIds.slice(0, Math.max(0, currentIndex)));
+    const branchId = before.find((id) => this.#isValidDropTarget({ id, position: "child" }) && this.#options.isBranch(id));
+    if (!branchId || !this.#setValidDropTarget({ id: branchId, position: "child" }))
+      return;
+    this.#options.announce(`${this.#labelFor(this.draggedId)}, moved into ${this.#labelFor(branchId)}.`);
+  }
+  moveOut() {
+    if (this.phase !== "dragging" || !this.draggedId)
+      return;
+    const parentId = this.#options.getParentId(this.draggedId);
+    if (!parentId)
+      return;
+    if (!this.#setValidDropTarget({ id: parentId, position: "after" }))
+      return;
+    this.#options.announce(`${this.#labelFor(this.draggedId)}, moved out after ${this.#labelFor(parentId)}.`);
+  }
+  setDropTarget(target) {
+    if (this.phase !== "dragging")
+      return;
+    this.#setValidDropTarget(target);
+  }
+  drop() {
+    if (this.phase !== "dragging" || !this.draggedId)
+      return;
+    if (!this.#isValidDropTarget(this.dropTarget)) {
+      const focusId2 = this.draggedId;
+      this.#options.announce(`${this.#labelFor(focusId2)}, no reorder target selected.`);
+      this.#reset();
+      this.#options.focus(focusId2);
+      return;
+    }
+    const target = this.#reorderTarget(this.draggedId, this.dropTarget);
+    this.#options.commit(this.draggedId, target);
+    this.#options.announce(`${this.#labelFor(this.draggedId)}, dropped ${this.#targetPhrase(this.dropTarget)}.`);
+    const focusId = this.draggedId;
+    this.#reset();
+    this.#options.focus(focusId);
+  }
+  cancel() {
+    if (this.phase !== "dragging")
+      return;
+    const focusId = this.draggedId;
+    const label = focusId ? this.#labelFor(focusId) : "Item";
+    this.#options.announce(`${label}, reorder cancelled.`);
+    this.#reset();
+    if (focusId)
+      this.#options.focus(focusId);
+  }
+  targetFromPointer(pointerY, element) {
+    const item = element.closest("[data-cinder-tree-item-id]");
+    if (!item)
+      return null;
+    const id = item.dataset["cinderTreeItemId"];
+    if (!id || id === this.draggedId)
+      return null;
+    const rect = item.getBoundingClientRect();
+    const offset = pointerY - rect.top;
+    const topThreshold = rect.height * 0.25;
+    const bottomThreshold = rect.height * 0.75;
+    const target = offset < topThreshold ? { id, position: "before" } : offset > bottomThreshold ? { id, position: "after" } : this.#options.isBranch(id) ? { id, position: "child" } : { id, position: "after" };
+    return this.#isValidDropTarget(target) ? target : null;
+  }
+  #setValidDropTarget(target) {
+    if (!target) {
+      this.dropTarget = null;
+      return true;
+    }
+    if (!this.#isValidDropTarget(target))
+      return false;
+    this.dropTarget = target;
+    return true;
+  }
+  #isValidDropTarget(target) {
+    if (!this.draggedId || !target || target.id === this.draggedId)
+      return false;
+    let currentId = target.id;
+    while (currentId) {
+      if (currentId === this.draggedId)
+        return false;
+      currentId = this.#options.getParentId(currentId);
+    }
+    return true;
+  }
+  #reorderTarget(draggedId, dropTarget) {
+    const fromParentId = this.#options.getParentId(draggedId) ?? null;
+    const toParentId = dropTarget.position === "child" ? dropTarget.id : this.#options.getParentId(dropTarget.id) ?? null;
+    return { ...dropTarget, fromParentId, toParentId };
+  }
+  #labelFor(id) {
+    return this.#options.getNode(id)?.label() ?? id;
+  }
+  #parentPhrase(id) {
+    const parentId = this.#options.getParentId(id);
+    return parentId ? `in ${this.#labelFor(parentId)}` : "in root";
+  }
+  #targetPhrase(target) {
+    if (target.position === "child")
+      return `into ${this.#labelFor(target.id)}`;
+    return `${target.position} ${this.#labelFor(target.id)}`;
+  }
+  #currentVisibleIndex(currentId, visibleIds) {
+    const currentIndex = visibleIds.indexOf(currentId);
+    if (currentIndex !== -1)
+      return currentIndex;
+    return this.draggedId ? visibleIds.indexOf(this.draggedId) : -1;
+  }
+  #reset() {
+    this.phase = "idle";
+    this.draggedId = null;
+    this.dropTarget = null;
+    this.dragSource = null;
+  }
+}
+
+// src/_internal/tree-registry.svelte.ts
+import * as $6 from "svelte/internal/client";
+import { SvelteMap } from "svelte/reactivity";
+
+// src/utilities/document-order.ts
+function inDocumentOrder(items) {
+  return items.toSorted((a, b) => {
+    if (a.node === b.node)
+      return 0;
+    const position = a.node.compareDocumentPosition(b.node);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+      return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+      return 1;
+    return 0;
+  });
+}
+
+// src/_internal/tree-registry.svelte.ts
+class TreeRegistry {
+  #nodes = new SvelteMap;
+  #children = new SvelteMap;
+  get size() {
+    return this.#nodes.size;
+  }
+  register(node) {
+    if (this.#nodes.has(node.id)) {
       throw new Error(`[cinder-tree] Duplicate TreeItem id: "${node.id}". All node ids must be unique within the tree.`);
     }
     this.#nodes.set(node.id, node);
@@ -535,15 +1375,18 @@ class TreeRegistry {
     const withNodes = ids.map((id) => ({ id, node: this.#nodes.get(id)?.node })).filter((entry) => entry.node !== undefined);
     return inDocumentOrder(withNodes).map((entry) => entry.id);
   }
-  getVisible(expandedIds) {
+  getVisible(expandedIds, visibilityPredicate) {
     const result = [];
     const expandedSet = new Set(expandedIds);
+    const retainedIds = visibilityPredicate ? this.#retainedIdsForPredicate(visibilityPredicate) : undefined;
     const visit = (parentId) => {
       const childIds = this.#orderedChildren(parentId);
       for (const id of childIds) {
+        if (retainedIds && !retainedIds.has(id))
+          continue;
         result.push(id);
         const node = this.#nodes.get(id);
-        if (node?.isBranch() && expandedSet.has(id)) {
+        if (node?.isBranch() && (expandedSet.has(id) || retainedIds?.has(id))) {
           visit(id);
         }
       }
@@ -551,6 +1394,26 @@ class TreeRegistry {
     visit(null);
     return result;
   }
+  #retainedIdsForPredicate(visibilityPredicate) {
+    const retainedIds = new Set;
+    for (const [id, node] of this.#nodes) {
+      if (!visibilityPredicate({
+        id,
+        label: node.label(),
+        parentId: node.parentId,
+        level: node.level
+      })) {
+        continue;
+      }
+      retainedIds.add(id);
+      let parentId = node.parentId;
+      while (parentId !== null) {
+        retainedIds.add(parentId);
+        parentId = this.parentOf(parentId) ?? null;
+      }
+    }
+    return retainedIds;
+  }
   getNode(id) {
     return this.#nodes.get(id);
   }
@@ -574,14 +1437,43 @@ class TreeRegistry {
     visit(parentId);
     return result;
   }
+  getAllBranchIds(options = {}) {
+    const result = [];
+    const visit = (parentId) => {
+      for (const id of this.#orderedChildren(parentId)) {
+        const node = this.#nodes.get(id);
+        if (!node?.isBranch())
+          continue;
+        if (!options.bulkOnly || this.isBulkExpandableBranch(id)) {
+          result.push(id);
+        }
+        visit(id);
+      }
+    };
+    visit(null);
+    return result;
+  }
+  isBulkExpandableBranch(id) {
+    const node = this.#nodes.get(id);
+    return Boolean(node?.isBranch() && (node.bulkExpandable?.() ?? true));
+  }
+  ancestorsOf(id) {
+    const result = [];
+    let parentId = this.parentOf(id);
+    while (parentId !== null && parentId !== undefined) {
+      result.push(parentId);
+      parentId = this.parentOf(parentId);
+    }
+    return result;
+  }
   siblingsOf(id) {
     const node = this.#nodes.get(id);
     if (!node)
       return [];
     return this.#orderedChildren(node.parentId);
   }
-  typeaheadMatch(prefix, currentId, expandedIds) {
-    const visible = this.getVisible(expandedIds);
+  typeaheadMatch(prefix, currentId, expandedIds, visibilityPredicate) {
+    const visible = this.getVisible(expandedIds, visibilityPredicate);
     const lower = prefix.toLowerCase();
     const startIndex = visible.indexOf(currentId);
     for (let offset = 1;offset <= visible.length; offset++) {
@@ -592,8 +1484,1323 @@ class TreeRegistry {
         return id;
       }
     }
-    return;
+    return;
+  }
+}
+
+// src/_internal/use-virtualizer.svelte.ts
+import * as $7 from "svelte/internal/client";
+
+// ../../node_modules/@tanstack/virtual-core/dist/esm/lazy-measurements.js
+function createLazyMeasurementsView(count, flat, getItemKey) {
+  const cache = new Array(count);
+  return new Proxy(cache, {
+    get(target, prop5, receiver) {
+      if (typeof prop5 === "string") {
+        const c = prop5.charCodeAt(0);
+        if (c >= 48 && c <= 57) {
+          const i = +prop5;
+          if (Number.isInteger(i) && i >= 0 && i < count) {
+            let v = target[i];
+            if (!v) {
+              const s = flat[i * 2];
+              v = target[i] = {
+                index: i,
+                key: getItemKey(i),
+                start: s,
+                size: flat[i * 2 + 1],
+                end: s + flat[i * 2 + 1],
+                lane: 0
+              };
+            }
+            return v;
+          }
+        }
+        if (prop5 === "length")
+          return count;
+      }
+      return Reflect.get(target, prop5, receiver);
+    }
+  });
+}
+
+// ../../node_modules/@tanstack/virtual-core/dist/esm/utils.js
+function memo(getDeps, fn, opts) {
+  let deps = opts.initialDeps ?? [];
+  let result;
+  let isInitial = true;
+  function memoizedFunction() {
+    var _a;
+    const debugEnabled = !!opts.key && !!((_a = opts.debug) == null ? undefined : _a.call(opts));
+    let depTime = 0;
+    if (debugEnabled)
+      depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
+    }
+    deps = newDeps;
+    let resultTime = 0;
+    if (debugEnabled)
+      resultTime = Date.now();
+    result = fn(...newDeps);
+    if (debugEnabled) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = " " + str;
+        }
+        return str;
+      };
+      console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? undefined : opts.key);
+    }
+    if ((opts == null ? undefined : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) {
+      opts.onChange(result);
+    }
+    isInitial = false;
+    return result;
+  }
+  memoizedFunction.updateDeps = (newDeps) => {
+    deps = newDeps;
+  };
+  return memoizedFunction;
+}
+function notUndefined(value, msg) {
+  if (value === undefined) {
+    throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
+  } else {
+    return value;
+  }
+}
+var approxEqual = (a, b) => Math.abs(a - b) < 1.01;
+
+// ../../node_modules/@tanstack/virtual-core/dist/esm/index.js
+var _isIOSResult;
+var isIOSWebKit = () => {
+  if (_isIOSResult !== undefined)
+    return _isIOSResult;
+  if (typeof navigator === "undefined")
+    return _isIOSResult = false;
+  if (/iP(hone|od|ad)/.test(navigator.userAgent))
+    return _isIOSResult = true;
+  const mtp = navigator.maxTouchPoints;
+  return _isIOSResult = navigator.platform === "MacIntel" && mtp !== undefined && mtp > 0;
+};
+var defaultKeyExtractor = (index) => index;
+var defaultRangeExtractor = (range) => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const len = end - start + 1;
+  const arr = new Array(len);
+  for (let i = 0;i < len; i++) {
+    arr[i] = start + i;
+  }
+  return arr;
+};
+var addEventListenerOptions = {
+  passive: true
+};
+var supportsScrollend = typeof window == "undefined" ? true : ("onscrollend" in window);
+var measureElement = (element, entry, instance) => {
+  if (instance.options.useCachedMeasurements) {
+    const index = instance.indexFromElement(element);
+    const key = instance.options.getItemKey(index);
+    return instance.itemSizeCache.get(key) ?? instance.options.estimateSize(index);
+  }
+  if (entry == null ? undefined : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size = Math.round(box[instance.options.horizontal ? "inlineSize" : "blockSize"]);
+      return size;
+    }
+  }
+  if (!entry) {
+    const index = instance.indexFromElement(element);
+    const key = instance.options.getItemKey(index);
+    const cachedSize = instance.itemSizeCache.get(key);
+    if (cachedSize !== undefined) {
+      return cachedSize;
+    }
+  }
+  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
+};
+class Virtualizer {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.targetWindow = null;
+    this.isScrolling = false;
+    this.scrollState = null;
+    this.measurementsCache = [];
+    this._flatMeasurements = null;
+    this.itemSizeCache = /* @__PURE__ */ new Map;
+    this.itemSizeCacheVersion = 0;
+    this.laneAssignments = /* @__PURE__ */ new Map;
+    this.pendingMin = null;
+    this.prevLanes = undefined;
+    this.lanesChangedFlag = false;
+    this.lanesSettling = false;
+    this.pendingScrollAnchor = null;
+    this.scrollRect = null;
+    this.scrollOffset = null;
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this._iosDeferredAdjustment = 0;
+    this._iosTouching = false;
+    this._iosJustTouchEnded = false;
+    this._iosTouchEndTimerId = null;
+    this._intendedScrollOffset = null;
+    this.elementsCache = /* @__PURE__ */ new Map;
+    this.now = () => {
+      var _a, _b, _c;
+      return ((_c = (_b = (_a = this.targetWindow) == null ? undefined : _a.performance) == null ? undefined : _b.now) == null ? undefined : _c.call(_b)) ?? Date.now();
+    };
+    this.observer = /* @__PURE__ */ (() => {
+      let _ro = null;
+      const get6 = () => {
+        if (_ro) {
+          return _ro;
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
+          return null;
+        }
+        return _ro = new this.targetWindow.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const run = () => {
+              const node = entry.target;
+              const index = this.indexFromElement(node);
+              if (!node.isConnected) {
+                this.observer.unobserve(node);
+                for (const [cacheKey, cachedNode] of this.elementsCache) {
+                  if (cachedNode === node) {
+                    this.elementsCache.delete(cacheKey);
+                    break;
+                  }
+                }
+                return;
+              }
+              if (this.shouldMeasureDuringScroll(index)) {
+                this.resizeItem(index, this.options.measureElement(node, entry, this));
+              }
+            };
+            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+          });
+        });
+      };
+      return {
+        disconnect: () => {
+          var _a;
+          (_a = get6()) == null || _a.disconnect();
+          _ro = null;
+        },
+        observe: (target) => {
+          var _a;
+          return (_a = get6()) == null ? undefined : _a.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a;
+          return (_a = get6()) == null ? undefined : _a.unobserve(target);
+        }
+      };
+    })();
+    this.range = null;
+    this.setOptions = (opts2) => {
+      var _a, _b;
+      const merged = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: () => {},
+        measureElement,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        anchorTo: "start",
+        followOnAppend: false,
+        scrollEndThreshold: 1,
+        isScrollingResetDelay: 150,
+        enabled: true,
+        isRtl: false,
+        useScrollendEvent: false,
+        useAnimationFrameWithResizeObserver: false,
+        laneAssignmentMode: "estimate",
+        useCachedMeasurements: false
+      };
+      for (const key in opts2) {
+        const v = opts2[key];
+        if (v !== undefined)
+          merged[key] = v;
+      }
+      const prevOptions = this.options;
+      let anchor = null;
+      let followOnAppend = null;
+      let edgeKeysChanged = false;
+      if (prevOptions !== undefined && prevOptions.enabled && merged.enabled && merged.anchorTo === "end" && this.scrollElement !== null) {
+        const prevCount = prevOptions.count;
+        const nextCount = merged.count;
+        const measurements = this.getMeasurements();
+        const prevFirstKey = prevCount > 0 ? ((_a = measurements[0]) == null ? undefined : _a.key) ?? prevOptions.getItemKey(0) : null;
+        const prevLastKey = prevCount > 0 ? ((_b = measurements[prevCount - 1]) == null ? undefined : _b.key) ?? prevOptions.getItemKey(prevCount - 1) : null;
+        const didCountChange = nextCount !== prevCount;
+        const didEdgeKeysChange = didCountChange || prevCount > 0 && nextCount > 0 && (merged.getItemKey(0) !== prevFirstKey || merged.getItemKey(nextCount - 1) !== prevLastKey);
+        if (didEdgeKeysChange) {
+          edgeKeysChanged = true;
+          const item = prevCount > 0 ? this.getVirtualItemForOffset(this.getScrollOffset()) ?? measurements[0] : null;
+          if (item) {
+            anchor = [item.key, this.getScrollOffset() - item.start];
+          }
+          const behavior = merged.followOnAppend === true ? "auto" : merged.followOnAppend || null;
+          if (behavior && nextCount > prevCount && this.isAtEnd(prevOptions.scrollEndThreshold) && (prevCount === 0 || merged.getItemKey(nextCount - 1) !== prevLastKey)) {
+            followOnAppend = behavior;
+          }
+        }
+      }
+      this.options = merged;
+      if (edgeKeysChanged) {
+        this.pendingMin = 0;
+        this.itemSizeCacheVersion++;
+      }
+      let anchorResolved = false;
+      let anchorDelta = 0;
+      if (anchor && this.scrollOffset !== null) {
+        const [anchorKey, anchorOffset] = anchor;
+        const newMeasurements = this.getMeasurements();
+        const { count, getItemKey } = this.options;
+        let idx = 0;
+        while (idx < count && getItemKey(idx) !== anchorKey) {
+          idx++;
+        }
+        if (idx < count) {
+          const anchorItem = newMeasurements[idx];
+          if (anchorItem) {
+            const newOffset = anchorItem.start + anchorOffset;
+            if (newOffset !== this.scrollOffset) {
+              anchorDelta = newOffset - this.scrollOffset;
+              this.scrollOffset = newOffset;
+              anchorResolved = true;
+            }
+          }
+        }
+      }
+      if (anchorResolved || followOnAppend) {
+        this.pendingScrollAnchor = [
+          anchorResolved ? anchor[0] : null,
+          anchorResolved ? anchor[1] : 0,
+          followOnAppend,
+          anchorDelta
+        ];
+      }
+    };
+    this.notify = (sync) => {
+      var _a, _b;
+      (_b = (_a = this.options).onChange) == null || _b.call(_a, this, sync);
+    };
+    this.maybeNotify = memo(() => {
+      this.calculateRange();
+      return [
+        this.isScrolling,
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null
+      ];
+    }, (isScrolling) => {
+      this.notify(isScrolling);
+    }, {
+      key: "maybeNotify",
+      debug: () => this.options.debug,
+      initialDeps: [
+        this.isScrolling,
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null
+      ]
+    });
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((d) => d());
+      this.unsubs = [];
+      this.observer.disconnect();
+      if (this.rafId != null && this.targetWindow) {
+        this.targetWindow.cancelAnimationFrame(this.rafId);
+        this.rafId = null;
+      }
+      this.scrollState = null;
+      this.scrollElement = null;
+      this.targetWindow = null;
+    };
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _a;
+      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        if (!scrollElement) {
+          this.maybeNotify();
+          return;
+        }
+        this.scrollElement = scrollElement;
+        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
+          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
+        } else {
+          this.targetWindow = ((_a = this.scrollElement) == null ? undefined : _a.window) ?? null;
+        }
+        this.elementsCache.forEach((cached) => {
+          this.observer.observe(cached);
+        });
+        this.unsubs.push(this.options.observeElementRect(this, (rect) => {
+          this.scrollRect = rect;
+          this.maybeNotify();
+        }));
+        this.unsubs.push(this.options.observeElementOffset(this, (offset, isScrolling) => {
+          if (this._intendedScrollOffset !== null && Math.abs(offset - this._intendedScrollOffset) < 1.5) {
+            offset = this._intendedScrollOffset;
+          }
+          this._intendedScrollOffset = null;
+          this.scrollAdjustments = 0;
+          this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
+          this.scrollOffset = offset;
+          this.isScrolling = isScrolling;
+          this._flushIosDeferredIfReady();
+          if (this.scrollState) {
+            this.scheduleScrollReconcile();
+          }
+          this.maybeNotify();
+        }));
+        if ("addEventListener" in this.scrollElement) {
+          const scrollEl = this.scrollElement;
+          const onTouchStart = () => {
+            this._iosTouching = true;
+            this._iosJustTouchEnded = false;
+            if (this._iosTouchEndTimerId !== null && this.targetWindow != null) {
+              this.targetWindow.clearTimeout(this._iosTouchEndTimerId);
+              this._iosTouchEndTimerId = null;
+            }
+          };
+          const onTouchEnd = () => {
+            this._iosTouching = false;
+            if (!isIOSWebKit() || this.targetWindow == null) {
+              return;
+            }
+            this._iosJustTouchEnded = true;
+            this._iosTouchEndTimerId = this.targetWindow.setTimeout(() => {
+              this._iosJustTouchEnded = false;
+              this._iosTouchEndTimerId = null;
+              this._flushIosDeferredIfReady();
+            }, 150);
+          };
+          scrollEl.addEventListener("touchstart", onTouchStart, addEventListenerOptions);
+          scrollEl.addEventListener("touchend", onTouchEnd, addEventListenerOptions);
+          this.unsubs.push(() => {
+            scrollEl.removeEventListener("touchstart", onTouchStart);
+            scrollEl.removeEventListener("touchend", onTouchEnd);
+            if (this._iosTouchEndTimerId !== null && this.targetWindow != null) {
+              this.targetWindow.clearTimeout(this._iosTouchEndTimerId);
+              this._iosTouchEndTimerId = null;
+            }
+          });
+        }
+        this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: undefined,
+          behavior: undefined
+        });
+      }
+      const anchor = this.pendingScrollAnchor;
+      this.pendingScrollAnchor = null;
+      if (anchor && this.scrollElement && this.options.enabled) {
+        const [key, _offset, followOnAppend, anchorDelta] = anchor;
+        if (key !== null && !followOnAppend) {
+          if (isIOSWebKit() && (this.isScrolling || this._iosTouching || this._iosJustTouchEnded)) {
+            if (anchorDelta !== 0) {
+              this._iosDeferredAdjustment += anchorDelta;
+            }
+          } else {
+            this._scrollToOffset(this.getScrollOffset(), {
+              adjustments: undefined,
+              behavior: undefined
+            });
+          }
+        }
+        if (followOnAppend) {
+          this.scrollToEnd({ behavior: followOnAppend });
+        }
+      }
+    };
+    this._flushIosDeferredIfReady = () => {
+      if (this._iosDeferredAdjustment === 0)
+        return;
+      if (this.isScrolling)
+        return;
+      if (this._iosTouching)
+        return;
+      if (this._iosJustTouchEnded)
+        return;
+      const cur = this.getScrollOffset();
+      const max = this.getMaxScrollOffset();
+      if (cur < 0 || cur > max)
+        return;
+      const delta = this._iosDeferredAdjustment;
+      this._iosDeferredAdjustment = 0;
+      this._scrollToOffset(cur, {
+        adjustments: this.scrollAdjustments += delta,
+        behavior: undefined
+      });
+    };
+    this.rafId = null;
+    this.getSize = () => {
+      if (!this.options.enabled) {
+        this.scrollRect = null;
+        return 0;
+      }
+      this.scrollRect = this.scrollRect ?? this.options.initialRect;
+      return this.scrollRect[this.options.horizontal ? "width" : "height"];
+    };
+    this.getScrollOffset = () => {
+      if (!this.options.enabled) {
+        this.scrollOffset = null;
+        return 0;
+      }
+      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
+      return this.scrollOffset;
+    };
+    this.getFurthestMeasurement = (measurements, index) => {
+      const furthestMeasurementsFound = /* @__PURE__ */ new Map;
+      const furthestMeasurements = /* @__PURE__ */ new Map;
+      for (let m = index - 1;m >= 0; m--) {
+        const measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
+        }
+        const previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
+        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+          furthestMeasurements.set(measurement.lane, measurement);
+        } else if (measurement.end < previousFurthestMeasurement.end) {
+          furthestMeasurementsFound.set(measurement.lane, true);
+        }
+        if (furthestMeasurementsFound.size === this.options.lanes) {
+          break;
+        }
+      }
+      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
+        if (a.end === b.end) {
+          return a.index - b.index;
+        }
+        return a.end - b.end;
+      })[0] : undefined;
+    };
+    this.getMeasurementOptions = memo(() => [
+      this.options.count,
+      this.options.paddingStart,
+      this.options.scrollMargin,
+      this.options.getItemKey,
+      this.options.enabled,
+      this.options.lanes,
+      this.options.laneAssignmentMode
+    ], (count, paddingStart, scrollMargin, getItemKey, enabled, lanes, laneAssignmentMode) => {
+      const lanesChanged = this.prevLanes !== undefined && this.prevLanes !== lanes;
+      if (lanesChanged) {
+        this.lanesChangedFlag = true;
+      }
+      this.prevLanes = lanes;
+      this.pendingMin = null;
+      return {
+        count,
+        paddingStart,
+        scrollMargin,
+        getItemKey,
+        enabled,
+        lanes,
+        laneAssignmentMode
+      };
+    }, {
+      key: false
+    });
+    this.getMeasurements = memo(() => [this.getMeasurementOptions(), this.itemSizeCacheVersion], ({
+      count,
+      paddingStart,
+      scrollMargin,
+      getItemKey,
+      enabled,
+      lanes,
+      laneAssignmentMode
+    }, _itemSizeCacheVersion) => {
+      const itemSizeCache = this.itemSizeCache;
+      if (!enabled) {
+        this.measurementsCache = [];
+        this.itemSizeCache.clear();
+        this.laneAssignments.clear();
+        return [];
+      }
+      if (this.laneAssignments.size > count) {
+        for (const index of this.laneAssignments.keys()) {
+          if (index >= count) {
+            this.laneAssignments.delete(index);
+          }
+        }
+      }
+      if (this.lanesChangedFlag) {
+        this.lanesChangedFlag = false;
+        this.lanesSettling = true;
+        this.measurementsCache = [];
+        this.itemSizeCache.clear();
+        this.laneAssignments.clear();
+        this.pendingMin = null;
+      }
+      if (this.measurementsCache.length === 0 && !this.lanesSettling) {
+        this.measurementsCache = this.options.initialMeasurementsCache;
+        this.measurementsCache.forEach((item) => {
+          this.itemSizeCache.set(item.key, item.size);
+        });
+      }
+      const min = this.lanesSettling ? 0 : this.pendingMin ?? 0;
+      this.pendingMin = null;
+      if (this.lanesSettling && this.measurementsCache.length === count) {
+        this.lanesSettling = false;
+      }
+      if (lanes === 1) {
+        const gap = this.options.gap;
+        const need = count * 2;
+        let flat = this._flatMeasurements;
+        if (!flat || flat.length < need) {
+          const next = new Float64Array(need);
+          if (flat && min > 0)
+            next.set(flat.subarray(0, min * 2));
+          flat = next;
+          this._flatMeasurements = flat;
+        }
+        let runningStart;
+        if (min === 0) {
+          runningStart = paddingStart + scrollMargin;
+        } else {
+          const prevIdx = min - 1;
+          runningStart = flat[prevIdx * 2] + flat[prevIdx * 2 + 1] + gap;
+        }
+        for (let i = min;i < count; i++) {
+          const key = getItemKey(i);
+          const measuredSize = itemSizeCache.get(key);
+          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          flat[i * 2] = runningStart;
+          flat[i * 2 + 1] = size;
+          runningStart += size + gap;
+        }
+        const view = createLazyMeasurementsView(count, flat, getItemKey);
+        this.measurementsCache = view;
+        return view;
+      }
+      const measurements = this.measurementsCache.slice(0, min);
+      const laneLastIndex = new Array(lanes).fill(undefined);
+      for (let m = 0;m < min; m++) {
+        const item = measurements[m];
+        if (item) {
+          laneLastIndex[item.lane] = m;
+        }
+      }
+      for (let i = min;i < count; i++) {
+        const key = getItemKey(i);
+        const cachedLane = this.laneAssignments.get(i);
+        let lane;
+        let start;
+        const shouldCacheLane = laneAssignmentMode === "estimate" || itemSizeCache.has(key);
+        if (cachedLane !== undefined && this.options.lanes > 1) {
+          lane = cachedLane;
+          const prevIndex = laneLastIndex[lane];
+          const prevInLane = prevIndex !== undefined ? measurements[prevIndex] : undefined;
+          start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
+        } else {
+          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+          start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+          lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+          if (this.options.lanes > 1 && shouldCacheLane) {
+            this.laneAssignments.set(i, lane);
+          }
+        }
+        const measuredSize = itemSizeCache.get(key);
+        const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+        const end = start + size;
+        measurements[i] = {
+          index: i,
+          start,
+          size,
+          end,
+          key,
+          lane
+        };
+        laneLastIndex[lane] = i;
+      }
+      this.measurementsCache = measurements;
+      return measurements;
+    }, {
+      key: "getMeasurements",
+      debug: () => this.options.debug
+    });
+    this.calculateRange = memo(() => [
+      this.getMeasurements(),
+      this.getSize(),
+      this.getScrollOffset(),
+      this.options.lanes
+    ], (measurements, outerSize, scrollOffset, lanes) => {
+      return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+        measurements,
+        outerSize,
+        scrollOffset,
+        lanes,
+        flat: lanes === 1 && this._flatMeasurements != null ? this._flatMeasurements : null
+      }) : null;
+    }, {
+      key: "calculateRange",
+      debug: () => this.options.debug
+    });
+    this.getVirtualIndexes = memo(() => {
+      let startIndex = null;
+      let endIndex = null;
+      const range = this.calculateRange();
+      if (range) {
+        startIndex = range.startIndex;
+        endIndex = range.endIndex;
+      }
+      this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
+      return [
+        this.options.rangeExtractor,
+        this.options.overscan,
+        this.options.count,
+        startIndex,
+        endIndex
+      ];
+    }, (rangeExtractor, overscan, count, startIndex, endIndex) => {
+      return startIndex === null || endIndex === null ? [] : rangeExtractor({
+        startIndex,
+        endIndex,
+        overscan,
+        count
+      });
+    }, {
+      key: "getVirtualIndexes",
+      debug: () => this.options.debug
+    });
+    this.indexFromElement = (node) => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this.shouldMeasureDuringScroll = (index) => {
+      var _a;
+      if (!this.scrollState || this.scrollState.behavior !== "smooth") {
+        return true;
+      }
+      const scrollIndex = this.scrollState.index ?? ((_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? undefined : _a.index);
+      if (scrollIndex !== undefined && this.range) {
+        const bufferSize = Math.max(this.options.overscan, Math.ceil((this.range.endIndex - this.range.startIndex) / 2));
+        const minIndex = Math.max(0, scrollIndex - bufferSize);
+        const maxIndex = Math.min(this.options.count - 1, scrollIndex + bufferSize);
+        return index >= minIndex && index <= maxIndex;
+      }
+      return true;
+    };
+    this.measureElement = (node) => {
+      if (!node) {
+        this.elementsCache.forEach((cached, key2) => {
+          if (!cached.isConnected) {
+            this.observer.unobserve(cached);
+            this.elementsCache.delete(key2);
+          }
+        });
+        return;
+      }
+      const index = this.indexFromElement(node);
+      const key = this.options.getItemKey(index);
+      const prevNode = this.elementsCache.get(key);
+      if (prevNode !== node) {
+        if (prevNode) {
+          this.observer.unobserve(prevNode);
+        }
+        this.observer.observe(node);
+        this.elementsCache.set(key, node);
+      }
+      if ((!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(index)) {
+        this.resizeItem(index, this.options.measureElement(node, undefined, this));
+      }
+    };
+    this.resizeItem = (index, size) => {
+      var _a, _b;
+      if (index < 0 || index >= this.options.count)
+        return;
+      let cachedSize;
+      let itemStart;
+      let key;
+      const flat = this._flatMeasurements;
+      if (this.options.lanes === 1 && flat !== null) {
+        key = this.options.getItemKey(index);
+        itemStart = flat[index * 2];
+        cachedSize = flat[index * 2 + 1];
+      } else {
+        const item = this.measurementsCache[index];
+        if (!item)
+          return;
+        key = item.key;
+        itemStart = item.start;
+        cachedSize = item.size;
+      }
+      const itemSize = this.itemSizeCache.get(key) ?? cachedSize;
+      const delta = size - itemSize;
+      if (delta !== 0) {
+        const wasAtEnd = this.options.anchorTo === "end" && ((_a = this.scrollState) == null ? undefined : _a.behavior) !== "smooth" && this.getVirtualDistanceFromEnd() <= this.options.scrollEndThreshold;
+        const prevTotalSize = wasAtEnd ? this.getTotalSize() : 0;
+        const shouldAdjustScroll = ((_b = this.scrollState) == null ? undefined : _b.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== undefined ? this.shouldAdjustScrollPositionOnItemSizeChange(this.measurementsCache[index] ?? {
+          index,
+          key,
+          start: itemStart,
+          size: cachedSize,
+          end: itemStart + cachedSize,
+          lane: 0
+        }, delta, this) : itemStart < this.getScrollOffset() + this.scrollAdjustments && (!this.itemSizeCache.has(key) || this.scrollDirection !== "backward"));
+        if (this.pendingMin === null || index < this.pendingMin) {
+          this.pendingMin = index;
+        }
+        this.itemSizeCache.set(key, size);
+        this.itemSizeCacheVersion++;
+        if (wasAtEnd) {
+          this.applyScrollAdjustment(this.getTotalSize() - prevTotalSize);
+        } else if (shouldAdjustScroll) {
+          this.applyScrollAdjustment(delta);
+        }
+        this.notify(false);
+      }
+    };
+    this.getVirtualItems = memo(() => [this.getVirtualIndexes(), this.getMeasurements()], (indexes, measurements) => {
+      const virtualItems = [];
+      for (let k = 0, len = indexes.length;k < len; k++) {
+        const i = indexes[k];
+        const measurement = measurements[i];
+        virtualItems.push(measurement);
+      }
+      return virtualItems;
+    }, {
+      key: "getVirtualItems",
+      debug: () => this.options.debug
+    });
+    this.getVirtualItemForOffset = (offset) => {
+      const measurements = this.getMeasurements();
+      if (measurements.length === 0) {
+        return;
+      }
+      const flat = this._flatMeasurements;
+      const useFlat = this.options.lanes === 1 && flat != null;
+      const idx = findNearestBinarySearch(0, measurements.length - 1, useFlat ? (i) => flat[i * 2] : (i) => notUndefined(measurements[i]).start, offset);
+      return notUndefined(measurements[idx]);
+    };
+    this.getMaxScrollOffset = () => {
+      if (!this.scrollElement)
+        return 0;
+      if ("scrollHeight" in this.scrollElement) {
+        return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
+      } else {
+        const doc = this.scrollElement.document.documentElement;
+        return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
+      }
+    };
+    this.getVirtualDistanceFromEnd = () => {
+      return Math.max(this.getTotalSize() - this.getSize() - this.getScrollOffset(), 0);
+    };
+    this.getDistanceFromEnd = () => {
+      return Math.max(this.getMaxScrollOffset() - this.getScrollOffset(), 0);
+    };
+    this.isAtEnd = (threshold = this.options.scrollEndThreshold) => {
+      return this.getDistanceFromEnd() <= threshold;
+    };
+    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
+      if (!this.scrollElement)
+        return 0;
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        align = toOffset >= scrollOffset + size ? "end" : "start";
+      }
+      if (align === "center") {
+        toOffset += (itemSize - size) / 2;
+      } else if (align === "end") {
+        toOffset -= size;
+      }
+      const maxOffset = this.getMaxScrollOffset();
+      return Math.max(Math.min(maxOffset, toOffset), 0);
+    };
+    this.getOffsetForIndex = (index, align = "auto") => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      const item = this.measurementsCache[index];
+      if (!item)
+        return;
+      if (align === "auto") {
+        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
+          align = "end";
+        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
+          align = "start";
+        } else {
+          return [scrollOffset, align];
+        }
+      }
+      if (align === "end" && index === this.options.count - 1) {
+        return [this.getMaxScrollOffset(), align];
+      }
+      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(toOffset, align, item.size),
+        align
+      ];
+    };
+    this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
+      const offset = this.getOffsetForAlignment(toOffset, align);
+      const now = this.now();
+      this.scrollState = {
+        index: null,
+        align,
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: undefined, behavior });
+      this.scheduleScrollReconcile();
+    };
+    this.scrollToIndex = (index, {
+      align: initialAlign = "auto",
+      behavior = "auto"
+    } = {}) => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const offsetInfo = this.getOffsetForIndex(index, initialAlign);
+      if (!offsetInfo) {
+        return;
+      }
+      const [offset, align] = offsetInfo;
+      const now = this.now();
+      this.scrollState = {
+        index,
+        align,
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: undefined, behavior });
+      this.scheduleScrollReconcile();
+    };
+    this.scrollBy = (delta, { behavior = "auto" } = {}) => {
+      const offset = this.getScrollOffset() + delta;
+      const now = this.now();
+      this.scrollState = {
+        index: null,
+        align: "start",
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: undefined, behavior });
+      this.scheduleScrollReconcile();
+    };
+    this.scrollToEnd = ({ behavior = "auto" } = {}) => {
+      if (this.options.count > 0) {
+        this.scrollToIndex(this.options.count - 1, {
+          align: "end",
+          behavior
+        });
+        return;
+      }
+      this.scrollToOffset(Math.max(this.getTotalSize() - this.getSize(), 0), {
+        behavior
+      });
+    };
+    this.getTotalSize = () => {
+      var _a;
+      const measurements = this.getMeasurements();
+      let end;
+      if (measurements.length === 0) {
+        end = this.options.paddingStart;
+      } else if (this.options.lanes === 1) {
+        const lastIdx = measurements.length - 1;
+        const flat = this._flatMeasurements;
+        if (flat != null) {
+          end = flat[lastIdx * 2] + flat[lastIdx * 2 + 1];
+        } else {
+          end = ((_a = measurements[lastIdx]) == null ? undefined : _a.end) ?? 0;
+        }
+      } else {
+        const endByLane = Array(this.options.lanes).fill(null);
+        let endIndex = measurements.length - 1;
+        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
+          const item = measurements[endIndex];
+          if (endByLane[item.lane] === null) {
+            endByLane[item.lane] = item.end;
+          }
+          endIndex--;
+        }
+        end = Math.max(...endByLane.filter((val) => val !== null));
+      }
+      return Math.max(end - this.options.scrollMargin + this.options.paddingEnd, 0);
+    };
+    this.takeSnapshot = () => {
+      const snapshot = [];
+      if (this.itemSizeCache.size === 0)
+        return snapshot;
+      const m = this.getMeasurements();
+      for (const item of m) {
+        if (item && this.itemSizeCache.has(item.key)) {
+          snapshot.push({
+            index: item.index,
+            key: item.key,
+            start: item.start,
+            size: item.size,
+            end: item.end,
+            lane: item.lane
+          });
+        }
+      }
+      return snapshot;
+    };
+    this._scrollToOffset = (offset, {
+      adjustments,
+      behavior
+    }) => {
+      this._intendedScrollOffset = offset + (adjustments ?? 0);
+      this.options.scrollToFn(offset, { behavior, adjustments }, this);
+    };
+    this.measure = () => {
+      this.pendingMin = null;
+      this.itemSizeCache.clear();
+      this.laneAssignments.clear();
+      this.itemSizeCacheVersion++;
+      this.notify(false);
+    };
+    this.setOptions(opts);
+  }
+  applyScrollAdjustment(delta, behavior) {
+    if (delta === 0)
+      return;
+    if (this.options.debug) {
+      console.info("correction", delta);
+    }
+    if (isIOSWebKit() && (this.isScrolling || this._iosTouching || this._iosJustTouchEnded)) {
+      this._iosDeferredAdjustment += delta;
+    } else {
+      this._scrollToOffset(this.getScrollOffset(), {
+        adjustments: this.scrollAdjustments += delta,
+        behavior
+      });
+    }
+  }
+  scheduleScrollReconcile() {
+    if (!this.targetWindow) {
+      this.scrollState = null;
+      return;
+    }
+    if (this.rafId != null)
+      return;
+    this.rafId = this.targetWindow.requestAnimationFrame(() => {
+      this.rafId = null;
+      this.reconcileScroll();
+    });
+  }
+  reconcileScroll() {
+    if (!this.scrollState)
+      return;
+    const el = this.scrollElement;
+    if (!el)
+      return;
+    const MAX_RECONCILE_MS = 5000;
+    if (this.now() - this.scrollState.startedAt > MAX_RECONCILE_MS) {
+      this.scrollState = null;
+      return;
+    }
+    const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : undefined;
+    const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
+    const STABLE_FRAMES = 1;
+    const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
+    if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
+      this.scrollState.stableFrames++;
+      if (this.scrollState.stableFrames >= STABLE_FRAMES) {
+        if (this.getScrollOffset() !== targetOffset) {
+          this._scrollToOffset(targetOffset, {
+            adjustments: undefined,
+            behavior: "auto"
+          });
+        }
+        this.scrollState = null;
+        return;
+      }
+    } else {
+      this.scrollState.stableFrames = 0;
+      if (targetChanged) {
+        const viewport = this.getSize() || 600;
+        const distance = Math.abs(targetOffset - this.getScrollOffset());
+        const keepSmooth = this.scrollState.behavior === "smooth" && distance > viewport;
+        this.scrollState.lastTargetOffset = targetOffset;
+        if (!keepSmooth) {
+          this.scrollState.behavior = "auto";
+        }
+        this._scrollToOffset(targetOffset, {
+          adjustments: undefined,
+          behavior: keepSmooth ? "smooth" : "auto"
+        });
+      }
+    }
+    this.scheduleScrollReconcile();
+  }
+}
+var findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange({
+  measurements,
+  outerSize,
+  scrollOffset,
+  lanes,
+  flat
+}) {
+  const lastIndex = measurements.length - 1;
+  const getStart = flat ? (index) => flat[index * 2] : (index) => measurements[index].start;
+  const getEnd = flat ? (index) => flat[index * 2] + flat[index * 2 + 1] : (index) => measurements[index].end;
+  if (measurements.length <= lanes) {
+    return {
+      startIndex: 0,
+      endIndex: lastIndex
+    };
+  }
+  let startIndex = findNearestBinarySearch(0, lastIndex, getStart, scrollOffset);
+  let endIndex = startIndex;
+  if (lanes === 1) {
+    while (endIndex < lastIndex && getEnd(endIndex) < scrollOffset + outerSize) {
+      endIndex++;
+    }
+  } else if (lanes > 1) {
+    const endPerLane = Array(lanes).fill(0);
+    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
+      const item = measurements[endIndex];
+      endPerLane[item.lane] = item.end;
+      endIndex++;
+    }
+    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
+    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
+      const item = measurements[startIndex];
+      startPerLane[item.lane] = item.start;
+      startIndex--;
+    }
+    startIndex = Math.max(0, startIndex - startIndex % lanes);
+    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
+  }
+  return { startIndex, endIndex };
+}
+
+// src/_internal/use-virtualizer.svelte.ts
+import { createSubscriber } from "svelte/reactivity";
+
+class TreeVirtualizer {
+  options;
+  #virtualizer = null;
+  #scrollElement = null;
+  #update = () => {};
+  #subscribe;
+  constructor(options) {
+    this.options = options;
+    this.#subscribe = createSubscriber((update) => {
+      if (typeof window === "undefined")
+        return;
+      this.#update = update;
+      this.#virtualizer = new Virtualizer(this.#buildOptions());
+      const cleanup = this.#virtualizer._didMount();
+      this.#virtualizer._willUpdate();
+      update();
+      return () => {
+        cleanup();
+        this.#virtualizer = null;
+      };
+    });
+  }
+  get virtualItems() {
+    this.#subscribe();
+    this.#syncOptions();
+    const fallbackItems = this.#fallbackVirtualItems();
+    const virtualizerItems = this.#virtualizer?.getVirtualItems();
+    const items = this.#shouldUseFallbackVirtualItems(virtualizerItems, fallbackItems) ? fallbackItems : virtualizerItems ?? fallbackItems;
+    return items.map((item) => ({ ...item }));
+  }
+  get totalSize() {
+    this.#subscribe();
+    this.#syncOptions();
+    return this.#virtualizer?.getTotalSize() ?? this.options.getCount() * this.options.getEstimatedSize();
+  }
+  setScrollElement(element) {
+    if (this.#scrollElement === element)
+      return;
+    this.#scrollElement = element;
+    this.#syncOptions();
+    this.#update();
+  }
+  scrollElement = (node) => {
+    this.setScrollElement(node);
+    return () => {
+      if (this.#scrollElement === node) {
+        this.setScrollElement(null);
+      }
+    };
+  };
+  measureElement = (node) => {
+    this.#syncOptions();
+    this.#virtualizer?.measureElement(node);
+    return () => this.#virtualizer?.measureElement(null);
+  };
+  scrollToIndex(index, options = { align: "auto" }) {
+    this.#subscribe();
+    this.#syncOptions();
+    const element = this.#getScrollElement();
+    const shouldUseFallbackScroll = Boolean(element && (!this.#virtualizer || element.clientHeight === 0));
+    this.#virtualizer?.scrollToIndex(index, options);
+    if (!element || !shouldUseFallbackScroll)
+      return;
+    element.scrollTop = Math.max(0, index * Math.max(1, this.options.getEstimatedSize()));
+    element.dispatchEvent(new Event("scroll"));
+  }
+  #syncOptions() {
+    if (!this.#virtualizer)
+      return;
+    this.#virtualizer.setOptions(this.#buildOptions());
+    this.#virtualizer._willUpdate();
+  }
+  #getScrollElement = () => this.#scrollElement ?? this.options.getScrollElement();
+  #buildOptions() {
+    return {
+      count: this.options.getCount(),
+      getScrollElement: this.#getScrollElement,
+      getItemKey: this.options.getItemKey,
+      estimateSize: () => this.options.getEstimatedSize(),
+      overscan: this.#overscan(),
+      initialRect: { width: 0, height: this.options.getInitialHeight() },
+      observeElementRect: this.#observeElementRect,
+      observeElementOffset: this.#observeElementOffset,
+      scrollToFn: this.#scrollToOffset,
+      measureElement: this.#measureElement,
+      onChange: () => this.#update(),
+      indexAttribute: "data-cinder-virtual-index"
+    };
+  }
+  #scrollToOffset = (offset, { adjustments = 0, behavior }, instance) => {
+    const element = instance.scrollElement;
+    if (!element)
+      return;
+    const top = offset + adjustments;
+    if (typeof element.scrollTo === "function") {
+      element.scrollTo(behavior ? { top, behavior } : { top });
+      return;
+    }
+    element.scrollTop = top;
+  };
+  #observeElementRect = (instance, callback) => {
+    const element = instance.scrollElement;
+    if (!element)
+      return () => {};
+    const notify = () => {
+      const rect = element.getBoundingClientRect();
+      callback({
+        width: rect.width,
+        height: rect.height || element.clientHeight || this.options.getInitialHeight()
+      });
+    };
+    notify();
+    if (typeof ResizeObserver === "undefined")
+      return () => {};
+    const observer = new ResizeObserver(notify);
+    observer.observe(element);
+    return () => observer.disconnect();
+  };
+  #measureElement = (element) => {
+    const rect = element.getBoundingClientRect();
+    return rect.height || this.options.getEstimatedSize();
+  };
+  #fallbackVirtualItems() {
+    const count = this.options.getCount();
+    if (count === 0)
+      return [];
+    const size = Math.max(1, this.options.getEstimatedSize());
+    const overscan = this.#overscan();
+    const scrollTop = this.#getScrollElement()?.scrollTop ?? 0;
+    const visibleCount = Math.ceil(this.options.getInitialHeight() / size);
+    const startIndex = Math.max(0, Math.floor(scrollTop / size) - overscan);
+    const itemCount = Math.min(count - startIndex, visibleCount + overscan * 2);
+    return Array.from({ length: itemCount }, (_, offset) => {
+      const index = startIndex + offset;
+      return {
+        key: this.options.getItemKey(index),
+        index,
+        start: index * size,
+        end: (index + 1) * size,
+        size,
+        lane: 0
+      };
+    });
+  }
+  #shouldUseFallbackVirtualItems(virtualizerItems, fallbackItems) {
+    if (!virtualizerItems || fallbackItems.length === 0) {
+      return false;
+    }
+    if (virtualizerItems.length === 0)
+      return true;
+    const scrollTop = this.#getScrollElement()?.scrollTop ?? 0;
+    if (scrollTop <= 0)
+      return false;
+    const firstVirtualizerIndex = virtualizerItems[0]?.index ?? 0;
+    const firstFallbackIndex = fallbackItems[0]?.index ?? 0;
+    return Math.abs(firstVirtualizerIndex - firstFallbackIndex) > 1;
+  }
+  #overscan() {
+    return Math.max(0, this.options.getOverscan());
   }
+  #observeElementOffset = (instance, callback) => {
+    const element = instance.scrollElement;
+    if (!element)
+      return () => {};
+    const notify = () => {
+      callback(element.scrollTop, true);
+      this.#update();
+    };
+    callback(element.scrollTop, false);
+    element.addEventListener("scroll", notify, { passive: true });
+    return () => element.removeEventListener("scroll", notify);
+  };
 }
 
 // ../../node_modules/esm-env/true.js
@@ -652,64 +2859,499 @@ function toggleSelectionScope(selectedIds, targetIds, disabledIds = new Set) {
   const targets = selectableIds(targetIds, disabledIds);
   if (targets.length === 0)
     return [...selectedIds];
-  const state2 = selectionStateFor(selectedIds, targets);
-  return state2.checked ? deselectIds(selectedIds, targets, disabledIds) : selectIds(selectedIds, targets, disabledIds);
+  const state4 = selectionStateFor(selectedIds, targets);
+  return state4.checked ? deselectIds(selectedIds, targets, disabledIds) : selectIds(selectedIds, targets, disabledIds);
 }
 
 // src/components/tree/tree.svelte
-var root_1 = $4.from_html(`<div class="cinder-tree-root"><div class="cinder-tree__selection-controls"><!></div> <div role="tree" tabindex="-1"><!></div></div>`);
-var root_22 = $4.from_html(`<div role="tree" tabindex="-1"><!></div>`);
+var root_3 = $8.from_html(`<button type="button" class="cinder-tree-item__disclosure" tabindex="-1"><span aria-hidden="true"></span></button>`);
+var root_42 = $8.from_html(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+var root_5 = $8.from_html(`<input type="checkbox" class="cinder-tree-item__checkbox" tabindex="-1" aria-hidden="true"/>`);
+var root_72 = $8.from_html(`<span class="cinder-tree-item__label cinder-_truncate"> </span>`);
+var root_2 = $8.from_html(`<div role="treeitem" class="cinder-tree-item cinder-tree-item--virtual" tabindex="-1"><div class="cinder-tree-item__row"><!> <!> <!></div></div>`);
+var root_17 = $8.from_html(`<div class="cinder-tree__virtual-spacer"></div>`);
+var root_82 = $8.from_html(`<div><!></div>`);
+var root_122 = $8.from_html(`<div class="cinder-tree__filter"><label class="cinder-sr-only"> </label> <input class="cinder-tree__filter-input" type="search" autocomplete="off" autocorrect="off"/></div>`);
+var root_132 = $8.from_html(`<div class="cinder-tree__selection-controls"><!></div>`);
+var root_142 = $8.from_html(`<div class="cinder-sr-only">Press Control Shift Space to lift the focused item, or Space from the reorder handle. Use
+        arrow keys to move. Press Space to drop, Escape to cancel.</div>`);
+var root_152 = $8.from_html(`<div class="cinder-tree__empty" role="none">No results</div>`);
+var root_112 = $8.from_html(`<div class="cinder-tree-root"><!> <!> <!> <!> <!> <!> <!></div>`);
+var root4 = $8.from_html(`<!> <!>`, 1);
 function Tree($$anchor, $$props) {
-  $4.push($$props, true);
-  let selectionMode = $4.prop($$props, "selectionMode", 3, "none"), checkboxSelection = $4.prop($$props, "checkboxSelection", 3, false), selectionBehavior = $4.prop($$props, "selectionBehavior", 3, "independent"), selectedIds = $4.prop($$props, "selectedIds", 31, () => $4.proxy([])), expandedIds = $4.prop($$props, "expandedIds", 31, () => $4.proxy([])), disableTypeahead = $4.prop($$props, "disableTypeahead", 3, false);
+  const generatedId = $8.props_id();
+  $8.push($$props, true);
+  const virtualizedRows = ($$anchor2) => {
+    var div = root_17();
+    $8.each(div, 21, () => $8.get(virtualRows), (row) => row.item.id, ($$anchor3, row) => {
+      const virtualItem = $8.derived(() => $8.get(row).virtualItem);
+      const item = $8.derived(() => $8.get(row).item);
+      const itemSelectionState = $8.derived(() => selectionStateForId($8.get(item).id));
+      var div_1 = root_2();
+      var div_2 = $8.child(div_1);
+      var node_1 = $8.child(div_2);
+      {
+        var consequent = ($$anchor4) => {
+          var button = root_3();
+          $8.template_effect(($0, $1) => {
+            $8.set_attribute(button, "aria-label", $0);
+            $8.set_attribute(button, "aria-expanded", $1);
+          }, [
+            () => `${virtualizedItemExpanded($8.get(item)) ? "Collapse" : "Expand"} ${$8.get(item).label}`,
+            () => virtualizedItemExpanded($8.get(item))
+          ]);
+          $8.delegated("click", button, (event2) => handleVirtualizedDisclosureClick($8.get(item), event2));
+          $8.append($$anchor4, button);
+        };
+        var d = $8.derived(() => $8.get(item).branch && !virtualizedFilterForcedOpen($8.get(item)));
+        var alternate = ($$anchor4) => {
+          var span = root_42();
+          $8.append($$anchor4, span);
+        };
+        $8.if(node_1, ($$render) => {
+          if ($8.get(d))
+            $$render(consequent);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      var node_2 = $8.sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor4) => {
+          var input = root_5();
+          $8.remove_input_defaults(input);
+          $8.attach(input, () => (node) => {
+            $8.user_effect(() => {
+              syncVirtualizedCheckboxElement(node, $8.get(item).id);
+            });
+          });
+          $8.template_effect(() => {
+            $8.set_checked(input, $8.get(itemSelectionState).checked);
+            input.disabled = $8.get(item).disabled;
+          });
+          $8.delegated("click", input, (event2) => handleVirtualizedCheckboxClick($8.get(item), event2));
+          $8.append($$anchor4, input);
+        };
+        var d_1 = $8.derived(() => checkboxSelectionActive());
+        $8.if(node_2, ($$render) => {
+          if ($8.get(d_1))
+            $$render(consequent_1);
+        });
+      }
+      var node_3 = $8.sibling(node_2, 2);
+      {
+        var consequent_2 = ($$anchor4) => {
+          var fragment = $8.comment();
+          var node_4 = $8.first_child(fragment);
+          {
+            let $0 = $8.derived(() => ({
+              item: $8.get(item),
+              expanded: virtualizedItemExpanded($8.get(item)),
+              selected: selectedIds().includes($8.get(item).id),
+              focused: $8.get(effectiveFocusedId) === $8.get(item).id
+            }));
+            $8.snippet(node_4, () => $$props.virtualizedItem, () => $8.get($0));
+          }
+          $8.append($$anchor4, fragment);
+        };
+        var alternate_1 = ($$anchor4) => {
+          var span_1 = root_72();
+          var text2 = $8.child(span_1, true);
+          $8.reset(span_1);
+          $8.template_effect(() => $8.set_text(text2, $8.get(item).label));
+          $8.append($$anchor4, span_1);
+        };
+        $8.if(node_3, ($$render) => {
+          if ($$props.virtualizedItem)
+            $$render(consequent_2);
+          else
+            $$render(alternate_1, -1);
+        });
+      }
+      $8.reset(div_2);
+      $8.reset(div_1);
+      $8.attach(div_1, () => virtualizer.measureElement);
+      $8.template_effect(($0, $1, $22, $32, $42, $52, $62) => {
+        $8.set_attribute(div_1, "id", $0);
+        $8.set_attribute(div_1, "aria-level", $8.get(item).level);
+        $8.set_attribute(div_1, "aria-expanded", $1);
+        $8.set_attribute(div_1, "aria-selected", $22);
+        $8.set_attribute(div_1, "aria-checked", $32);
+        $8.set_attribute(div_1, "aria-disabled", $8.get(item).disabled || undefined);
+        $8.set_attribute(div_1, "aria-setsize", $8.get(item).setSize);
+        $8.set_attribute(div_1, "aria-posinset", $8.get(item).posInSet);
+        $8.set_attribute(div_1, "aria-label", $8.get(item).label);
+        $8.set_attribute(div_1, "data-cinder-tree-item-id", $8.get(item).id);
+        $8.set_attribute(div_1, "data-cinder-expanded", $42);
+        $8.set_attribute(div_1, "data-cinder-selected", $52);
+        $8.set_attribute(div_1, "data-cinder-disabled", $8.get(item).disabled ? "" : undefined);
+        $8.set_attribute(div_1, "data-cinder-focused", $8.get(effectiveFocusedId) === $8.get(item).id ? "" : undefined);
+        $8.set_attribute(div_1, "data-cinder-virtual-index", $8.get(virtualItem).index);
+        $8.set_style(div_1, $62);
+        $8.set_style(div_2, `padding-inline-start: ${$8.get(item).level * 1.25}rem;`);
+      }, [
+        () => virtualItemElementId($8.get(item)),
+        () => $8.get(item).branch ? virtualizedItemExpanded($8.get(item)) : undefined,
+        () => selectionMode() === "none" || checkboxSelectionActive() ? undefined : selectedIds().includes($8.get(item).id),
+        () => ariaCheckedForSelectionState($8.get(itemSelectionState)),
+        () => $8.get(item).branch && virtualizedItemExpanded($8.get(item)) ? "" : undefined,
+        () => selectedIds().includes($8.get(item).id) ? "" : undefined,
+        () => virtualizedRowStyle($8.get(virtualItem).start, $8.get(virtualItem).size)
+      ]);
+      $8.delegated("click", div_1, (event2) => handleVirtualizedItemClick($8.get(item), event2));
+      $8.delegated("keydown", div_1, (event2) => handleVirtualizedItemKeydown($8.get(item), event2));
+      $8.append($$anchor3, div_1);
+    });
+    $8.reset(div);
+    $8.template_effect(($0) => $8.set_style(div, $0), [() => virtualizedSpacerStyle()]);
+    $8.append($$anchor2, div);
+  };
+  const treeBody = ($$anchor2) => {
+    var div_3 = root_82();
+    $8.attribute_effect(div_3, ($0, $1, $22) => ({
+      ...rest,
+      id: $8.get(treeId),
+      role: "tree",
+      tabindex: $8.get(isVirtualizedTree) ? 0 : -1,
+      class: $0,
+      style: $1,
+      "aria-label": $8.get(resolvedAriaLabel),
+      "aria-labelledby": $8.get(resolvedAriaLabelledBy),
+      "aria-activedescendant": $8.get(virtualizedActiveDescendantId),
+      "aria-multiselectable": selectionMode() === "multiple" ? true : undefined,
+      "aria-busy": $8.get(filterStatusBusy) || undefined,
+      "data-cinder-checkbox-selection": $22,
+      "data-cinder-virtualized": $8.get(isVirtualizedTree) ? "" : undefined,
+      onkeydown: handleKeydown,
+      onpointermove: handlePointerMove,
+      onpointerup: handlePointerUp,
+      onpointercancel: handlePointerCancel
+    }), [
+      () => classNames("cinder-tree", $$props.class),
+      () => treeStyle(),
+      () => checkboxSelectionActive() ? "" : undefined
+    ]);
+    var node_5 = $8.child(div_3);
+    {
+      var consequent_3 = ($$anchor3) => {
+        virtualizedRows($$anchor3);
+      };
+      var alternate_2 = ($$anchor3) => {
+        var fragment_2 = $8.comment();
+        var node_6 = $8.first_child(fragment_2);
+        $8.snippet(node_6, () => $$props.children ?? $8.noop);
+        $8.append($$anchor3, fragment_2);
+      };
+      $8.if(node_5, ($$render) => {
+        if ($8.get(isVirtualizedTree))
+          $$render(consequent_3);
+        else
+          $$render(alternate_2, -1);
+      });
+    }
+    $8.reset(div_3);
+    $8.attach(div_3, () => virtualizer.scrollElement);
+    $8.bind_this(div_3, ($$value) => $8.set(treeElement, $$value), () => $8.get(treeElement));
+    $8.append($$anchor2, div_3);
+  };
+  let selectionMode = $8.prop($$props, "selectionMode", 3, "none"), checkboxSelection = $8.prop($$props, "checkboxSelection", 3, false), selectionBehavior = $8.prop($$props, "selectionBehavior", 3, "independent"), selectedIds = $8.prop($$props, "selectedIds", 31, () => $8.proxy([])), expandedIds = $8.prop($$props, "expandedIds", 31, () => $8.proxy([])), ref = $8.prop($$props, "ref", 15), virtualized = $8.prop($$props, "virtualized", 3, false), virtualizationEstimatedRowHeight = $8.prop($$props, "virtualizationEstimatedRowHeight", 3, 36), virtualizationOverscan = $8.prop($$props, "virtualizationOverscan", 3, 4), virtualizationHeight = $8.prop($$props, "virtualizationHeight", 3, "20rem"), disableTypeahead = $8.prop($$props, "disableTypeahead", 3, false), filterPlaceholder = $8.prop($$props, "filterPlaceholder", 3, "Search tree"), showSearch = $8.prop($$props, "showSearch", 3, false), filterPredicate = $8.prop($$props, "filterPredicate", 3, defaultFilterPredicate), rest = $8.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "selectionMode",
+    "checkboxSelection",
+    "selectionBehavior",
+    "selectedIds",
+    "expandedIds",
+    "ref",
+    "items",
+    "virtualized",
+    "virtualizationEstimatedRowHeight",
+    "virtualizationOverscan",
+    "virtualizationHeight",
+    "virtualizedItem",
+    "aria-label",
+    "aria-labelledby",
+    "disableTypeahead",
+    "id",
+    "class",
+    "style",
+    "selectionControls",
+    "filterValue",
+    "onfilterchange",
+    "filterPlaceholder",
+    "showSearch",
+    "filterPredicate",
+    "onreorder",
+    "children"
+  ]);
+  function normalizeOptionalText(value) {
+    const trimmedValue = value?.trim();
+    return trimmedValue ? trimmedValue : undefined;
+  }
+  function defaultFilterPredicate(label, _id, query) {
+    return label.toLowerCase().includes(query.toLowerCase());
+  }
   const registry = new TreeRegistry;
-  let focusedId = $4.state(null);
-  let selectionAnchorId = $4.state(null);
-  let typeaheadBuffer = $4.state("");
+  let focusedId = $8.state(null);
+  let treeElement = $8.state(null);
+  let filterInputElement = $8.state(null);
+  let uncontrolledFilterValue = $8.state($8.proxy(untrack2(() => $$props.filterValue ?? "")));
+  let filterStatusAnnouncement = $8.state("");
+  let filterStatusAnnouncementSequence = $8.state(0);
+  let filterStatusBusy = $8.state(false);
+  let filterStatusTimer = null;
+  let expansionAnnouncement = $8.state("");
+  let expansionAnnouncementSequence = $8.state(0);
+  let dragAnnouncement = $8.state("");
+  let dragAnnouncementSequence = $8.state(0);
+  let dragController = $8.state(null);
+  let latestDragPointerX = 0;
+  let latestDragPointerY = 0;
+  let dragScrollElement = null;
+  let dragScrollAnimationFrame = null;
+  let selectionAnchorId = $8.state(null);
+  let typeaheadBuffer = $8.state("");
   let typeaheadTimer = null;
   let hasWarnedNoLabel = false;
-  $4.user_effect(() => {
-    if (!$$props["aria-label"] && !$$props["aria-labelledby"] && !hasWarnedNoLabel) {
+  let hasWarnedVirtualizedChildren = false;
+  let hasWarnedVirtualizedWithoutItems = false;
+  const resolvedAriaLabel = $8.derived(() => normalizeOptionalText($$props["aria-label"]));
+  const resolvedAriaLabelledBy = $8.derived(() => normalizeOptionalText($$props["aria-labelledby"]));
+  const resolvedFilterPlaceholder = $8.derived(() => normalizeOptionalText(filterPlaceholder()) ?? "Search tree");
+  $8.user_effect(() => {
+    if (!$8.get(resolvedAriaLabel) && !$8.get(resolvedAriaLabelledBy) && !hasWarnedNoLabel) {
       hasWarnedNoLabel = true;
       devWarn("[cinder-tree] Tree requires either aria-label or aria-labelledby.");
     }
   });
-  $4.user_effect(() => {
+  $8.user_effect(() => {
+    if (virtualized() && $$props.children && !hasWarnedVirtualizedChildren) {
+      hasWarnedVirtualizedChildren = true;
+      devWarn("[cinder-tree] virtualized Tree uses the items prop; child snippets are ignored while virtualized is true.");
+    }
+    if (virtualized() && !$$props.items && !hasWarnedVirtualizedWithoutItems) {
+      hasWarnedVirtualizedWithoutItems = true;
+      devWarn("[cinder-tree] virtualized Tree requires the items prop.");
+    }
+  });
+  $8.user_effect(() => {
     return () => {
       if (typeaheadTimer !== null) {
         clearTimeout(typeaheadTimer);
         typeaheadTimer = null;
       }
+      if (filterStatusTimer !== null) {
+        clearTimeout(filterStatusTimer);
+        filterStatusTimer = null;
+      }
+      stopDragAutoscroll();
     };
   });
-  const visibleIds = $4.derived(() => registry.getVisible(expandedIds()));
-  const initialFocusId = $4.derived(() => {
+  const isFilterControlled = $8.derived(() => $$props.filterValue !== undefined);
+  const currentFilterValue = $8.derived(() => $8.get(isFilterControlled) ? $$props.filterValue ?? "" : $8.get(uncontrolledFilterValue));
+  const normalizedFilterValue = $8.derived(() => $8.get(currentFilterValue).trim());
+  const filtering = $8.derived(() => $8.get(normalizedFilterValue).length > 0);
+  const treeId = $8.derived(() => $$props.id ?? `${generatedId}-tree`);
+  const filterInputId = $8.derived(() => `${generatedId}-filter`);
+  const dragInstructionsId = $8.derived(() => `${generatedId}-drag-instructions`);
+  const isVirtualizedTree = $8.derived(() => virtualized() && $$props.items != null);
+  const flattenedDataItems = $8.derived(() => flattenTreeDataItems($$props.items ?? []));
+  const flattenedDataItemById = $8.derived(() => new Map($8.get(flattenedDataItems).map((item) => [item.id, item])));
+  const hasTreeChrome = $8.derived(() => $$props.selectionControls != null || showSearch() || $8.get(filtering) || $$props.onreorder != null);
+  const hasRegisteredItems = $8.derived(() => $8.get(isVirtualizedTree) ? $8.get(flattenedDataItems).length > 0 : registry.size > 0);
+  const activeVisibilityPredicate = $8.derived(() => {
+    if (!$8.get(filtering))
+      return;
+    const query = $8.get(normalizedFilterValue);
+    const predicate = filterPredicate();
+    return ({ id, label }) => predicate(label, id, query);
+  });
+  const activeDataVisibilityPredicate = $8.derived(() => {
+    if (!$8.get(filtering))
+      return;
+    const query = $8.get(normalizedFilterValue);
+    const predicate = filterPredicate();
+    return (item) => predicate(item.label, item.id, query);
+  });
+  const visibleDataItems = $8.derived(() => visibleTreeDataItems($8.get(flattenedDataItems), expandedIds(), $8.get(activeDataVisibilityPredicate)));
+  const registryVisibleIds = $8.derived(() => registry.getVisible(expandedIds(), $8.get(activeVisibilityPredicate)));
+  const visibleIds = $8.derived(() => $8.get(isVirtualizedTree) ? $8.get(visibleDataItems).map((item) => item.id) : $8.get(registryVisibleIds));
+  const hasNoFilterResults = $8.derived(() => $8.get(filtering) && $8.get(hasRegisteredItems) && $8.get(visibleIds).length === 0);
+  const visibleIdSet = $8.derived(() => new SvelteSet($8.get(visibleIds)));
+  const expandableBranchIds = $8.derived(() => $8.get(isVirtualizedTree) ? $8.get(flattenedDataItems).filter((item) => item.branch).map((item) => item.id) : registry.getAllBranchIds({ bulkOnly: true }));
+  const expandableBranchCount = $8.derived(() => $8.get(expandableBranchIds).length);
+  const hasExpandedItems = $8.derived(() => expandedIds().length > 0);
+  $8.user_effect(() => {
+    if (filterStatusTimer !== null) {
+      clearTimeout(filterStatusTimer);
+      filterStatusTimer = null;
+    }
+    if (!$8.get(filtering)) {
+      $8.set(filterStatusBusy, false);
+      $8.set(filterStatusAnnouncement, "");
+      return;
+    }
+    const query = $8.get(normalizedFilterValue);
+    const resultCount = $8.get(visibleIds).length;
+    $8.set(filterStatusBusy, true);
+    filterStatusTimer = setTimeout(() => {
+      $8.set(filterStatusAnnouncement, resultCount === 0 ? `No results for ${query}.` : `${resultCount} result${resultCount === 1 ? "" : "s"} found.`, true);
+      $8.set(filterStatusAnnouncementSequence, $8.get(filterStatusAnnouncementSequence) + 1);
+      $8.set(filterStatusBusy, false);
+      filterStatusTimer = null;
+    }, 500);
+  });
+  const initialFocusId = $8.derived(() => {
     if (selectionMode() !== "none" && selectedIds().length > 0) {
-      for (const id of $4.get(visibleIds)) {
+      for (const id of $8.get(visibleIds)) {
         if (selectedIds().includes(id))
           return id;
       }
     }
-    return $4.get(visibleIds)[0] ?? null;
+    return $8.get(visibleIds)[0] ?? null;
   });
   function visibleFocusCandidate(id) {
-    return id !== null && $4.get(visibleIds).includes(id) ? id : null;
+    return id !== null && $8.get(visibleIds).includes(id) ? id : null;
   }
-  const effectiveFocusedId = $4.derived(() => {
-    return visibleFocusCandidate($4.get(focusedId)) ?? visibleFocusCandidate($4.get(initialFocusId)) ?? $4.get(visibleIds)[0] ?? null;
+  const effectiveFocusedId = $8.derived(() => {
+    return visibleFocusCandidate($8.get(focusedId)) ?? visibleFocusCandidate($8.get(initialFocusId)) ?? $8.get(visibleIds)[0] ?? null;
+  });
+  $8.user_effect(() => {
+    if ($8.get(focusedId) === null || $8.get(visibleIds).includes($8.get(focusedId)))
+      return;
+    $8.set(focusedId, $8.get(initialFocusId) ?? $8.get(visibleIds)[0] ?? null, true);
+  });
+  const virtualizer = new TreeVirtualizer({
+    getScrollElement: () => $8.get(treeElement),
+    getCount: () => $8.get(visibleDataItems).length,
+    getItemKey: (index) => $8.get(visibleDataItems)[index]?.id ?? index,
+    getEstimatedSize: () => virtualizationEstimatedRowHeight(),
+    getOverscan: () => virtualizationOverscan(),
+    getInitialHeight: () => typeof virtualizationHeight() === "number" ? virtualizationHeight() : virtualizationEstimatedRowHeight() * 10
+  });
+  $8.user_effect(() => {
+    virtualizer.setScrollElement($8.get(isVirtualizedTree) ? $8.get(treeElement) : null);
+  });
+  const virtualItems = $8.derived(() => virtualizer.virtualItems);
+  const virtualizedActiveItem = $8.derived(() => $8.get(effectiveFocusedId) ? $8.get(flattenedDataItemById).get($8.get(effectiveFocusedId)) : undefined);
+  const virtualizedActiveDescendantId = $8.derived(() => $8.get(isVirtualizedTree) && $8.get(virtualizedActiveItem) ? virtualItemElementId($8.get(virtualizedActiveItem)) : undefined);
+  const virtualRows = $8.derived(() => {
+    const rows = [];
+    const renderedIndexes = new Set;
+    for (const virtualItem of $8.get(virtualItems)) {
+      const item = $8.get(visibleDataItems)[virtualItem.index];
+      if (item) {
+        renderedIndexes.add(virtualItem.index);
+        rows.push({ virtualItem, item });
+      }
+    }
+    if ($8.get(effectiveFocusedId)) {
+      const focusedIndex = $8.get(visibleIds).indexOf($8.get(effectiveFocusedId));
+      const focusedItem = $8.get(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) {
+    return `${$8.get(treeId)}-item-${item.index}`;
+  }
+  function virtualizedHeightValue() {
+    return typeof virtualizationHeight() === "number" ? `${virtualizationHeight()}px` : virtualizationHeight();
+  }
+  function virtualizedTreeStyle() {
+    return `block-size: ${virtualizedHeightValue()}; overflow: auto; position: relative;`;
+  }
+  function treeStyle() {
+    const forwardedStyle = $$props.style ?? undefined;
+    if (!$8.get(isVirtualizedTree))
+      return forwardedStyle;
+    return forwardedStyle ? `${forwardedStyle}; ${virtualizedTreeStyle()}` : virtualizedTreeStyle();
+  }
+  function virtualizedSpacerStyle() {
+    return `block-size: ${virtualizer.totalSize}px; position: relative; inline-size: 100%;`;
+  }
+  function virtualizedRowStyle(start, size) {
+    return `position: absolute; inset-inline: 0; transform: translateY(${start}px); block-size: ${size}px;`;
+  }
+  function virtualizedItemExpanded(item) {
+    return expandedIds().includes(item.id) || $8.get(filtering) && item.branch && $8.get(visibleDataItems).some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id));
+  }
+  function virtualizedFilterForcedOpen(item) {
+    return item.branch && $8.get(filtering) && !expandedIds().includes(item.id) && $8.get(visibleDataItems).some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id));
+  }
+  function firstVisibleVirtualizedChildIndex(parentId) {
+    return $8.get(visibleDataItems).findIndex((item) => item.parentId === parentId);
+  }
+  function focusFirstVirtualizedChild(parentId) {
+    const index = firstVisibleVirtualizedChildIndex(parentId);
+    if (index !== -1)
+      focusVirtualIndex(index);
+  }
   function focusNode(id) {
-    $4.set(focusedId, id, true);
+    if ($8.get(isVirtualizedTree)) {
+      const index = $8.get(visibleIds).indexOf(id);
+      if (index !== -1)
+        focusVirtualIndex(index);
+      return;
+    }
+    $8.set(focusedId, id, true);
     registry.getNode(id)?.focus();
   }
+  async function focusVirtualIndex(index) {
+    const id = $8.get(visibleIds)[index];
+    if (!id)
+      return;
+    virtualizer.scrollToIndex(index, { align: "auto" });
+    await tick2();
+    $8.set(focusedId, id, true);
+    $8.get(treeElement)?.focus();
+  }
+  function announceExpansion(message) {
+    $8.set(expansionAnnouncement, message, true);
+    $8.set(expansionAnnouncementSequence, $8.get(expansionAnnouncementSequence) + 1);
+  }
+  function announceDrag(message) {
+    $8.set(dragAnnouncement, message, true);
+    $8.set(dragAnnouncementSequence, $8.get(dragAnnouncementSequence) + 1);
+  }
+  $8.user_effect(() => {
+    if (!$$props.onreorder) {
+      $8.set(dragController, null);
+      return;
+    }
+    $8.set(dragController, $8.get(dragController) ?? new TreeDragController(untrack2(() => ({
+      getVisibleIds: () => $8.get(visibleIds),
+      getNode: (id) => registry.getNode(id),
+      getParentId: (id) => registry.parentOf(id),
+      isBranch: (id) => registry.getNode(id)?.isBranch() ?? false,
+      focus: focusNode,
+      announce: announceDrag,
+      commit: (draggedId, target) => $$props.onreorder?.(draggedId, target)
+    }))), true);
+  });
   function focusFallbackAfterUnregister(parentId) {
-    const currentVisibleIds = registry.getVisible(expandedIds());
+    const currentVisibleIds = registry.getVisible(expandedIds(), $8.get(activeVisibilityPredicate));
     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 {
-      $4.set(focusedId, null);
+      $8.set(focusedId, null);
     }
   }
   function setExpandedInternal(id, next) {
@@ -721,18 +3363,123 @@ function Tree($$anchor, $$props) {
       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);
+      }
+    }
+    return nextIds;
+  }
+  async function expandAll() {
+    if ($8.get(isVirtualizedTree)) {
+      const nextIds = withExpandedIds($8.get(expandableBranchIds));
+      if (nextIds.length !== expandedIds().length) {
+        expandedIds(nextIds);
+        await tick2();
+        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 tick2();
+    }
+    if (changed)
+      announceExpansion("All items expanded.");
+  }
+  function collapseAll() {
+    if (expandedIds().length === 0)
+      return;
+    expandedIds([]);
+    announceExpansion("All items collapsed.");
+  }
+  function expandOneLevel() {
+    const expandedIdSet = new Set(expandedIds());
+    const visibleBranchIds = $8.get(isVirtualizedTree) ? $8.get(visibleDataItems).filter((item) => item.branch && item.ancestorIds.every((id) => expandedIdSet.has(id))).map((item) => item.id) : $8.get(visibleIds).filter((id) => registry.isBulkExpandableBranch(id) && registry.ancestorsOf(id).every((ancestorId) => expandedIdSet.has(ancestorId)));
+    const nextIds = withExpandedIds(visibleBranchIds);
+    if (nextIds.length === expandedIds().length)
+      return;
+    expandedIds(nextIds);
+    announceExpansion("One tree level expanded.");
+  }
+  function focusItem(id) {
+    if (!$8.get(visibleIds).includes(id))
+      return;
+    focusNode(id);
+  }
+  async function expandToItem(id) {
+    if ($8.get(isVirtualizedTree)) {
+      const item = $8.get(flattenedDataItemById).get(id);
+      if (!item)
+        return;
+      const nextIds2 = withExpandedIds(item.ancestorIds);
+      if (nextIds2.length !== expandedIds().length) {
+        expandedIds(nextIds2);
+        await tick2();
+      }
+      focusItem(id);
+      return;
+    }
+    if (!registry.getNode(id))
+      return;
+    const nextIds = withExpandedIds(registry.ancestorsOf(id));
+    if (nextIds.length !== expandedIds().length) {
+      expandedIds(nextIds);
+      await tick2();
+    }
+    focusItem(id);
+  }
+  function scrollToRow(id, options = undefined) {
+    if ($8.get(isVirtualizedTree)) {
+      const index = $8.get(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) {
     const disabledIds = new Set;
     for (const id of ids) {
-      if (registry.getNode(id)?.disabled)
+      if ($8.get(isVirtualizedTree)) {
+        if ($8.get(flattenedDataItemById).get(id)?.disabled)
+          disabledIds.add(id);
+      } else if (registry.getNode(id)?.disabled) {
         disabledIds.add(id);
+      }
     }
     return disabledIds;
   }
   function checkboxSelectionActive() {
     return checkboxSelection() && selectionMode() === "multiple";
   }
+  function ariaCheckedForSelectionState(state5) {
+    if (!checkboxSelectionActive())
+      return;
+    if (state5.indeterminate)
+      return "mixed";
+    return state5.checked ? "true" : "false";
+  }
   function selectionTargetsFor(id) {
+    if ($8.get(isVirtualizedTree)) {
+      const item = $8.get(flattenedDataItemById).get(id);
+      if (!item)
+        return [];
+      return [id, ...descendantTreeDataIds($8.get(flattenedDataItems), id)];
+    }
     const node = registry.getNode(id);
     if (!node)
       return [];
@@ -741,8 +3488,11 @@ function Tree($$anchor, $$props) {
       return [...explicitScopeIds];
     return [id, ...registry.descendantsOf(id)];
   }
+  function childDataItemIds(parentId) {
+    return $8.get(visibleDataItems).filter((item) => item.parentId === parentId).map((item) => item.id);
+  }
   function selectionTargetsForChildren(parentId, includeDescendants) {
-    const childIds = registry.childrenOf(parentId);
+    const childIds = $8.get(isVirtualizedTree) ? childDataItemIds(parentId) : registry.childrenOf(parentId);
     if (!includeDescendants)
       return childIds;
     const targets = [];
@@ -760,9 +3510,22 @@ function Tree($$anchor, $$props) {
     const disabledIds = disabledIdsFor(targets);
     selectedIds(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 = $8.get(isVirtualizedTree) ? $8.get(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])));
+    }
+    $8.set(selectionAnchorId, id, true);
+  }
   function toggleSelectedInternal(id, event2) {
-    const node = registry.getNode(id);
-    if (!node || node.disabled)
+    const disabled = $8.get(isVirtualizedTree) ? $8.get(flattenedDataItemById).get(id)?.disabled ?? true : registry.getNode(id)?.disabled ?? true;
+    if (disabled)
       return;
     if (selectionMode() === "none")
       return;
@@ -770,49 +3533,65 @@ function Tree($$anchor, $$props) {
     const isMeta = event2 ? event2.metaKey || event2.ctrlKey : false;
     if (selectionMode() === "single") {
       selectedIds(selectedIds().includes(id) ? [] : [id]);
-      $4.set(selectionAnchorId, id, true);
+      $8.set(selectionAnchorId, id, true);
       return;
     }
-    if (isShift && $4.get(selectionAnchorId)) {
-      const anchorVisible = $4.get(visibleIds).includes($4.get(selectionAnchorId));
-      const anchor = anchorVisible ? $4.get(selectionAnchorId) : id;
+    if (isShift && $8.get(selectionAnchorId)) {
+      const anchorVisible = $8.get(visibleIds).includes($8.get(selectionAnchorId));
+      const anchor = anchorVisible ? $8.get(selectionAnchorId) : id;
       if (!anchorVisible)
-        $4.set(selectionAnchorId, id, true);
-      const anchorIndex = $4.get(visibleIds).indexOf(anchor);
-      const targetIndex = $4.get(visibleIds).indexOf(id);
+        $8.set(selectionAnchorId, id, true);
+      const anchorIndex = $8.get(visibleIds).indexOf(anchor);
+      const targetIndex = $8.get(visibleIds).indexOf(id);
       const start = Math.min(anchorIndex, targetIndex);
       const end = Math.max(anchorIndex, targetIndex);
-      const rangeIds = $4.get(visibleIds).slice(start, end + 1).filter((rangeId) => {
+      const rangeIds = $8.get(visibleIds).slice(start, end + 1).filter((rangeId) => {
+        if ($8.get(isVirtualizedTree))
+          return !$8.get(flattenedDataItemById).get(rangeId)?.disabled;
         const rangeNode = registry.getNode(rangeId);
         return rangeNode && !rangeNode.disabled;
       });
       selectedIds(rangeIds);
     } else if (isMeta) {
       selectedIds(toggleIndependentId(selectedIds(), id));
-      $4.set(selectionAnchorId, id, true);
+      $8.set(selectionAnchorId, id, true);
     } else {
       if (selectionBehavior() === "cascade") {
         applySelectionScope(selectionTargetsFor(id));
       } else {
         selectedIds(toggleIndependentId(selectedIds(), id));
       }
-      $4.set(selectionAnchorId, id, true);
+      $8.set(selectionAnchorId, id, true);
     }
   }
   function selectAll() {
     if (selectionMode() !== "multiple")
       return;
-    const allVisibleTargets = $4.get(visibleIds).flatMap((id) => {
-      const node = registry.getNode(id);
-      if (!node || node.disabled)
+    const allVisibleTargets = $8.get(visibleIds).flatMap((id) => {
+      const disabled = $8.get(isVirtualizedTree) ? $8.get(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));
     if (allVisibleTargets.length > 0)
-      $4.set(selectionAnchorId, allVisibleTargets[0], true);
+      $8.set(selectionAnchorId, allVisibleTargets[0], true);
   }
+  const treeRef = {
+    expandAll,
+    collapseAll,
+    expandOneLevel,
+    focusItem,
+    expandToItem,
+    scrollToRow
+  };
+  $8.user_effect(() => {
+    ref(treeRef);
+    return () => {
+      ref(undefined);
+    };
+  });
   const context = {
     get selectionMode() {
       return selectionMode();
@@ -836,7 +3615,28 @@ function Tree($$anchor, $$props) {
       return selectedIds();
     },
     get focusedId() {
-      return $4.get(effectiveFocusedId);
+      return $8.get(effectiveFocusedId);
+    },
+    get filtering() {
+      return $8.get(filtering);
+    },
+    get filterValue() {
+      return $8.get(normalizedFilterValue);
+    },
+    get hasRegisteredItems() {
+      return $8.get(hasRegisteredItems);
+    },
+    get expandableBranchCount() {
+      return $8.get(expandableBranchCount);
+    },
+    get hasExpandedItems() {
+      return $8.get(hasExpandedItems);
+    },
+    get dragController() {
+      return $8.get(dragController);
+    },
+    get dragInstructionsId() {
+      return $8.get(dragInstructionsId);
     },
     isExpanded(id) {
       return expandedIds().includes(id);
@@ -845,22 +3645,30 @@ function Tree($$anchor, $$props) {
       return selectedIds().includes(id);
     },
     isFocused(id) {
-      return $4.get(effectiveFocusedId) === id;
+      return $8.get(effectiveFocusedId) === id;
+    },
+    positionInSet(id) {
+      const siblings = registry.siblingsOf(id).filter((siblingId) => $8.get(visibleIdSet).has(siblingId));
+      const index = siblings.indexOf(id);
+      return index === -1 ? undefined : index + 1;
+    },
+    setSize(id) {
+      const siblings = registry.siblingsOf(id).filter((siblingId) => $8.get(visibleIdSet).has(siblingId));
+      return siblings.length || undefined;
+    },
+    isVisible(id) {
+      return $8.get(visibleIdSet).has(id);
+    },
+    hasVisibleDescendant(id) {
+      return registry.descendantsOf(id).some((descendantId) => $8.get(visibleIdSet).has(descendantId));
+    },
+    matchesFilter(label, id) {
+      return $8.get(filtering) && filterPredicate()(label, id, $8.get(normalizedFilterValue));
     },
     checkboxSelectionActive,
     selectionStateFor: selectionStateForId,
     toggleSelectionScope(id) {
-      if (selectionMode() !== "multiple")
-        return;
-      const node = registry.getNode(id);
-      if (!node || node.disabled)
-        return;
-      if (selectionBehavior() === "cascade") {
-        applySelectionScope(selectionTargetsFor(id));
-      } else {
-        selectedIds(toggleIndependentId(selectedIds(), id, disabledIdsFor([id])));
-      }
-      $4.set(selectionAnchorId, id, true);
+      toggleSelectionScopeInternal(id);
     },
     selectSelectionScope(parentId, next, includeDescendants) {
       if (selectionMode() !== "multiple")
@@ -875,32 +3683,45 @@ function Tree($$anchor, $$props) {
     selectionTargetsFor,
     selectionTargetsForChildren,
     setExpanded: setExpandedInternal,
+    expandAll,
+    collapseAll,
+    expandOneLevel,
+    focusItem,
+    expandToItem,
+    scrollToRow,
     toggleSelected: toggleSelectedInternal,
     register(node) {
       const unregister = registry.register(node);
       return () => {
         unregister();
-        if ($4.get(focusedId) === node.id) {
+        if ($8.get(focusedId) === node.id) {
           focusFallbackAfterUnregister(node.parentId);
         }
       };
     },
     focusVisibleDelta(currentId, delta) {
-      const index = $4.get(visibleIds).indexOf(currentId);
+      const index = $8.get(visibleIds).indexOf(currentId);
       if (index === -1)
         return;
       const nextIndex = index + delta;
-      if (nextIndex < 0 || nextIndex >= $4.get(visibleIds).length)
+      if (nextIndex < 0 || nextIndex >= $8.get(visibleIds).length)
         return;
-      focusNode($4.get(visibleIds)[nextIndex]);
+      focusNode($8.get(visibleIds)[nextIndex]);
+    },
+    canFocusVisibleDelta(currentId, delta) {
+      const index = $8.get(visibleIds).indexOf(currentId);
+      if (index === -1)
+        return false;
+      const nextIndex = index + delta;
+      return nextIndex >= 0 && nextIndex < $8.get(visibleIds).length;
     },
     focusFirstVisible() {
-      if ($4.get(visibleIds).length > 0)
-        focusNode($4.get(visibleIds)[0]);
+      if ($8.get(visibleIds).length > 0)
+        focusNode($8.get(visibleIds)[0]);
     },
     focusLastVisible() {
-      if ($4.get(visibleIds).length > 0)
-        focusNode($4.get(visibleIds)[$4.get(visibleIds).length - 1]);
+      if ($8.get(visibleIds).length > 0)
+        focusNode($8.get(visibleIds)[$8.get(visibleIds).length - 1]);
     },
     focusParent(currentId) {
       const parentId = registry.parentOf(currentId);
@@ -908,7 +3729,7 @@ function Tree($$anchor, $$props) {
         focusNode(parentId);
     },
     focusFirstChild(currentId) {
-      const childId = registry.firstChildOf(currentId);
+      const childId = registry.childrenOf(currentId).find((id) => $8.get(visibleIdSet).has(id));
       if (childId)
         focusNode(childId);
     },
@@ -917,12 +3738,12 @@ function Tree($$anchor, $$props) {
         return;
       if (typeaheadTimer !== null)
         clearTimeout(typeaheadTimer);
-      $4.set(typeaheadBuffer, $4.get(typeaheadBuffer) + char);
-      const match = registry.typeaheadMatch($4.get(typeaheadBuffer), currentId, expandedIds());
+      $8.set(typeaheadBuffer, $8.get(typeaheadBuffer) + char);
+      const match = registry.typeaheadMatch($8.get(typeaheadBuffer), currentId, expandedIds(), $8.get(activeVisibilityPredicate));
       if (match)
         focusNode(match);
       typeaheadTimer = setTimeout(() => {
-        $4.set(typeaheadBuffer, "");
+        $8.set(typeaheadBuffer, "");
         typeaheadTimer = null;
       }, 500);
     },
@@ -937,76 +3758,408 @@ function Tree($$anchor, $$props) {
       }
     },
     notifyFocus(id) {
-      $4.set(focusedId, id, true);
+      $8.set(focusedId, id, true);
     }
   };
   setTreeContextRaw(context);
   setTreeItemParentContextRaw({ parentId: null, level: 1 });
   function handleKeydown(event2) {
+    if ($8.get(isVirtualizedTree) && handleVirtualizedKeydown(event2))
+      return;
+    if ((event2.metaKey || event2.ctrlKey) && event2.key === "a") {
+      event2.preventDefault();
+      selectAll();
+    }
+    if (event2.key === "Escape" && $8.get(dragController)?.dragging) {
+      event2.preventDefault();
+      $8.get(dragController).cancel();
+    }
+  }
+  function currentVirtualIndex() {
+    const index = $8.get(effectiveFocusedId) ? $8.get(visibleIds).indexOf($8.get(effectiveFocusedId)) : -1;
+    return index === -1 ? 0 : index;
+  }
+  function focusVirtualDelta(delta) {
+    const nextIndex = currentVirtualIndex() + delta;
+    if (nextIndex < 0 || nextIndex >= $8.get(visibleIds).length)
+      return;
+    focusVirtualIndex(nextIndex);
+  }
+  function applyVirtualizedShiftSelection(currentId, event2) {
+    if (!currentId || !event2.shiftKey || selectionMode() !== "multiple")
+      return;
+    toggleSelectedInternal(currentId, event2);
+  }
+  function expandVirtualizedSiblings(currentId) {
+    const currentItem = currentId ? $8.get(flattenedDataItemById).get(currentId) : undefined;
+    if (!currentItem)
+      return;
+    const siblingBranchIds = $8.get(flattenedDataItems).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(event2) {
     if ((event2.metaKey || event2.ctrlKey) && event2.key === "a") {
       event2.preventDefault();
       selectAll();
+      return true;
+    }
+    const currentId = $8.get(effectiveFocusedId);
+    const currentItem = currentId ? $8.get(flattenedDataItemById).get(currentId) : undefined;
+    switch (event2.key) {
+      case "ArrowDown":
+        event2.preventDefault();
+        applyVirtualizedShiftSelection(currentId, event2);
+        focusVirtualDelta(1);
+        return true;
+      case "ArrowUp":
+        event2.preventDefault();
+        applyVirtualizedShiftSelection(currentId, event2);
+        focusVirtualDelta(-1);
+        return true;
+      case "Home":
+        event2.preventDefault();
+        focusVirtualIndex(0);
+        return true;
+      case "End":
+        event2.preventDefault();
+        focusVirtualIndex($8.get(visibleIds).length - 1);
+        return true;
+      case "ArrowRight":
+        event2.preventDefault();
+        if (!currentItem?.branch)
+          return true;
+        if (!virtualizedItemExpanded(currentItem)) {
+          setExpandedInternal(currentItem.id, true);
+        } else {
+          focusFirstVirtualizedChild(currentItem.id);
+        }
+        return true;
+      case "ArrowLeft":
+        event2.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;
+        event2.preventDefault();
+        activateVirtualizedItemFromKeyboard(currentItem, event2);
+        return true;
+      case "*":
+        event2.preventDefault();
+        expandVirtualizedSiblings(currentId);
+        return true;
+      default:
+        return handleVirtualizedTypeahead(event2);
+    }
+  }
+  function handleVirtualizedTypeahead(event2) {
+    if (disableTypeahead() || event2.key.length !== 1 || event2.ctrlKey || event2.metaKey || event2.altKey) {
+      return false;
+    }
+    event2.preventDefault();
+    if (typeaheadTimer !== null)
+      clearTimeout(typeaheadTimer);
+    $8.set(typeaheadBuffer, $8.get(typeaheadBuffer) + event2.key.toLowerCase());
+    const startIndex = currentVirtualIndex();
+    for (let offset = 1;offset <= $8.get(visibleDataItems).length; offset++) {
+      const index = (startIndex + offset) % $8.get(visibleDataItems).length;
+      const item = $8.get(visibleDataItems)[index];
+      if (item?.label.toLowerCase().startsWith($8.get(typeaheadBuffer))) {
+        focusVirtualIndex(index);
+        break;
+      }
+    }
+    typeaheadTimer = setTimeout(() => {
+      $8.set(typeaheadBuffer, "");
+      typeaheadTimer = null;
+    }, 500);
+    return true;
+  }
+  function updateFilterValue(next) {
+    if (!$8.get(isFilterControlled))
+      $8.set(uncontrolledFilterValue, next, true);
+    $$props.onfilterchange?.(next);
+  }
+  function handleFilterInput(event2) {
+    const target = event2.currentTarget;
+    updateFilterValue(target.value);
+  }
+  function handleFilterKeydown(event2) {
+    if (event2.key === "ArrowDown") {
+      event2.preventDefault();
+      const firstVisibleId = $8.get(visibleIds)[0];
+      if (firstVisibleId)
+        focusNode(firstVisibleId);
+      return;
+    }
+    if (event2.key === "Escape" && $8.get(currentFilterValue).length > 0) {
+      event2.preventDefault();
+      event2.stopPropagation();
+      updateFilterValue("");
+      $8.get(filterInputElement)?.focus();
+    }
+  }
+  function pointerTargetElement(clientX, clientY, fallbackTarget) {
+    if (typeof document !== "undefined") {
+      const element = document.elementFromPoint(clientX, clientY);
+      if (element instanceof HTMLElement)
+        return element;
+    }
+    return fallbackTarget instanceof HTMLElement ? fallbackTarget : null;
+  }
+  function updateDragTargetFromPointer(clientX, clientY, fallbackTarget) {
+    const element = pointerTargetElement(clientX, clientY, fallbackTarget);
+    if (!element)
+      return;
+    $8.get(dragController)?.setDropTarget($8.get(dragController).targetFromPointer(clientY, element));
+  }
+  function stopDragAutoscroll() {
+    if (dragScrollAnimationFrame !== null && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(dragScrollAnimationFrame);
+    }
+    dragScrollAnimationFrame = null;
+    dragScrollElement = null;
+  }
+  function scheduleDragAutoscroll() {
+    if (dragScrollAnimationFrame !== null || !$8.get(dragController)?.pointerDragging || !dragScrollElement || typeof requestAnimationFrame !== "function") {
+      return;
+    }
+    dragScrollAnimationFrame = requestAnimationFrame(() => {
+      dragScrollAnimationFrame = null;
+      const tree = dragScrollElement;
+      if (!$8.get(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(event2) {
+    if (!$8.get(dragController)?.pointerDragging)
+      return;
+    event2.preventDefault();
+    latestDragPointerX = event2.clientX;
+    latestDragPointerY = event2.clientY;
+    dragScrollElement = event2.currentTarget;
+    updateDragTargetFromPointer(event2.clientX, event2.clientY, event2.target);
+    scheduleDragAutoscroll();
+  }
+  function handlePointerUp(event2) {
+    if (!$8.get(dragController)?.pointerDragging)
+      return;
+    event2.preventDefault();
+    stopDragAutoscroll();
+    $8.get(dragController).drop();
+  }
+  function handlePointerCancel() {
+    if (!$8.get(dragController)?.pointerDragging)
+      return;
+    stopDragAutoscroll();
+    $8.get(dragController).cancel();
+  }
+  function handleVirtualizedItemClick(item, event2) {
+    $8.set(focusedId, item.id, true);
+    $8.get(treeElement)?.focus();
+    if (event2.detail > 1)
+      return;
+    if (!item.disabled)
+      toggleSelectedInternal(item.id, event2);
+    if (item.branch && !event2.shiftKey && !event2.metaKey && !event2.ctrlKey) {
+      setExpandedInternal(item.id, !expandedIds().includes(item.id));
+    }
+  }
+  function handleVirtualizedDisclosureClick(item, event2) {
+    event2.stopPropagation();
+    $8.set(focusedId, item.id, true);
+    $8.get(treeElement)?.focus();
+    setExpandedInternal(item.id, !expandedIds().includes(item.id));
+  }
+  function syncVirtualizedCheckboxElement(element, id) {
+    const state5 = selectionStateForId(id);
+    element.checked = state5.checked;
+    element.indeterminate = state5.indeterminate && !state5.checked;
+  }
+  function handleVirtualizedCheckboxClick(item, event2) {
+    event2.stopPropagation();
+    $8.set(focusedId, item.id, true);
+    $8.get(treeElement)?.focus();
+    toggleSelectionScopeInternal(item.id);
+    const checkbox = event2.currentTarget;
+    if (checkbox instanceof HTMLInputElement) {
+      syncVirtualizedCheckboxElement(checkbox, item.id);
+    }
+  }
+  function activateVirtualizedItemFromKeyboard(item, event2) {
+    if (item.branch && event2.key === "Enter") {
+      setExpandedInternal(item.id, !expandedIds().includes(item.id));
+      if (checkboxSelectionActive())
+        return;
+    }
+    if (checkboxSelectionActive()) {
+      toggleSelectionScopeInternal(item.id);
+    } else {
+      toggleSelectedInternal(item.id, event2);
     }
   }
-  var fragment = $4.comment();
-  var node_1 = $4.first_child(fragment);
+  function handleVirtualizedItemKeydown(item, event2) {
+    if (event2.key !== "Enter" && event2.key !== " ")
+      return;
+    event2.preventDefault();
+    event2.stopPropagation();
+    $8.set(focusedId, item.id, true);
+    $8.get(treeElement)?.focus();
+    activateVirtualizedItemFromKeyboard(item, event2);
+  }
+  var fragment_3 = root4();
+  var node_7 = $8.first_child(fragment_3);
   {
-    var consequent = ($$anchor2) => {
-      var div = root_1();
-      var div_1 = $4.child(div);
-      var node_2 = $4.child(div_1);
-      $4.snippet(node_2, () => $$props.selectionControls);
-      $4.reset(div_1);
-      var div_2 = $4.sibling(div_1, 2);
-      var node_3 = $4.child(div_2);
-      $4.snippet(node_3, () => $$props.children);
-      $4.reset(div_2);
-      $4.reset(div);
-      $4.template_effect(($0, $1) => {
-        $4.set_class(div_2, 1, $0);
-        $4.set_attribute(div_2, "aria-label", $$props["aria-label"]);
-        $4.set_attribute(div_2, "aria-labelledby", $$props["aria-labelledby"]);
-        $4.set_attribute(div_2, "aria-multiselectable", selectionMode() === "multiple" ? true : undefined);
-        $4.set_attribute(div_2, "data-cinder-checkbox-selection", $1);
-      }, [
-        () => $4.clsx(classNames("cinder-tree", $$props.class)),
-        () => checkboxSelectionActive() ? "" : undefined
-      ]);
-      $4.delegated("keydown", div_2, handleKeydown);
-      $4.append($$anchor2, div);
-    };
-    var alternate = ($$anchor2) => {
-      var div_3 = root_22();
-      var node_4 = $4.child(div_3);
-      $4.snippet(node_4, () => $$props.children);
-      $4.reset(div_3);
-      $4.template_effect(($0, $1) => {
-        $4.set_class(div_3, 1, $0);
-        $4.set_attribute(div_3, "aria-label", $$props["aria-label"]);
-        $4.set_attribute(div_3, "aria-labelledby", $$props["aria-labelledby"]);
-        $4.set_attribute(div_3, "aria-multiselectable", selectionMode() === "multiple" ? true : undefined);
-        $4.set_attribute(div_3, "data-cinder-checkbox-selection", $1);
-      }, [
-        () => $4.clsx(classNames("cinder-tree", $$props.class)),
-        () => checkboxSelectionActive() ? "" : undefined
-      ]);
-      $4.delegated("keydown", div_3, handleKeydown);
-      $4.append($$anchor2, div_3);
+    var consequent_9 = ($$anchor2) => {
+      var div_4 = root_112();
+      var node_8 = $8.child(div_4);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var div_5 = root_122();
+          var label_1 = $8.child(div_5);
+          var text_1 = $8.child(label_1, true);
+          $8.reset(label_1);
+          var input_1 = $8.sibling(label_1, 2);
+          $8.remove_input_defaults(input_1);
+          $8.set_attribute(input_1, "spellcheck", false);
+          $8.bind_this(input_1, ($$value) => $8.set(filterInputElement, $$value), () => $8.get(filterInputElement));
+          $8.reset(div_5);
+          $8.template_effect(() => {
+            $8.set_attribute(label_1, "for", $8.get(filterInputId));
+            $8.set_text(text_1, $8.get(resolvedFilterPlaceholder));
+            $8.set_attribute(input_1, "id", $8.get(filterInputId));
+            $8.set_value(input_1, $8.get(currentFilterValue));
+            $8.set_attribute(input_1, "placeholder", $8.get(resolvedFilterPlaceholder));
+            $8.set_attribute(input_1, "aria-label", $8.get(resolvedFilterPlaceholder));
+            $8.set_attribute(input_1, "aria-controls", $8.get(treeId));
+          });
+          $8.delegated("input", input_1, handleFilterInput);
+          $8.delegated("keydown", input_1, handleFilterKeydown);
+          $8.append($$anchor3, div_5);
+        };
+        $8.if(node_8, ($$render) => {
+          if (showSearch())
+            $$render(consequent_4);
+        });
+      }
+      var node_9 = $8.sibling(node_8, 2);
+      {
+        var consequent_5 = ($$anchor3) => {
+          var div_6 = root_132();
+          var node_10 = $8.child(div_6);
+          $8.snippet(node_10, () => $$props.selectionControls);
+          $8.reset(div_6);
+          $8.append($$anchor3, div_6);
+        };
+        $8.if(node_9, ($$render) => {
+          if ($$props.selectionControls)
+            $$render(consequent_5);
+        });
+      }
+      var node_11 = $8.sibling(node_9, 2);
+      {
+        var consequent_6 = ($$anchor3) => {
+          var div_7 = root_142();
+          $8.template_effect(() => $8.set_attribute(div_7, "id", $8.get(dragInstructionsId)));
+          $8.append($$anchor3, div_7);
+        };
+        $8.if(node_11, ($$render) => {
+          if ($$props.onreorder)
+            $$render(consequent_6);
+        });
+      }
+      var node_12 = $8.sibling(node_11, 2);
+      treeBody(node_12);
+      var node_13 = $8.sibling(node_12, 2);
+      {
+        var consequent_7 = ($$anchor3) => {
+          var div_8 = root_152();
+          $8.append($$anchor3, div_8);
+        };
+        $8.if(node_13, ($$render) => {
+          if ($8.get(hasNoFilterResults))
+            $$render(consequent_7);
+        });
+      }
+      var node_14 = $8.sibling(node_13, 2);
+      _visually_hidden_live_region(node_14, {
+        get message() {
+          return $8.get(filterStatusAnnouncement);
+        },
+        get announcementSequence() {
+          return $8.get(filterStatusAnnouncementSequence);
+        },
+        priority: "polite"
+      });
+      var node_15 = $8.sibling(node_14, 2);
+      {
+        var consequent_8 = ($$anchor3) => {
+          _visually_hidden_live_region($$anchor3, {
+            get message() {
+              return $8.get(dragAnnouncement);
+            },
+            get announcementSequence() {
+              return $8.get(dragAnnouncementSequence);
+            },
+            priority: "assertive"
+          });
+        };
+        $8.if(node_15, ($$render) => {
+          if ($$props.onreorder)
+            $$render(consequent_8);
+        });
+      }
+      $8.reset(div_4);
+      $8.append($$anchor2, div_4);
     };
-    $4.if(node_1, ($$render) => {
-      if ($$props.selectionControls)
-        $$render(consequent);
+    var alternate_3 = ($$anchor2) => {
+      treeBody($$anchor2);
+    };
+    $8.if(node_7, ($$render) => {
+      if ($8.get(hasTreeChrome))
+        $$render(consequent_9);
       else
-        $$render(alternate, -1);
+        $$render(alternate_3, -1);
     });
   }
-  $4.append($$anchor, fragment);
-  $4.pop();
+  var node_16 = $8.sibling(node_7, 2);
+  _visually_hidden_live_region(node_16, {
+    get message() {
+      return $8.get(expansionAnnouncement);
+    },
+    get announcementSequence() {
+      return $8.get(expansionAnnouncementSequence);
+    },
+    priority: "polite"
+  });
+  $8.append($$anchor, fragment_3);
+  $8.pop();
 }
-$4.delegate(["keydown"]);
+$8.delegate(["click", "keydown", "input"]);
 
 // src/components/tree/index.ts
 var Tree2 = Object.assign(Tree, {
+  ExpandAll: Tree_expand_all,
   Item: Tree_item,
   SelectAll: Tree_select_all
 });
@@ -1016,4 +4169,4 @@ export {
   Tree2 as Tree
 };
 
-//# debugId=976427EC8351700764756E2164756E21
+//# debugId=DE55DCB41FE5FD0564756E2164756E21