@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/server/components/tree/index.js

@@ -1,39 +1,8 @@
 import { createRequire } from "node:module";
-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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
-// src/components/_tree-select-all/tree-select-all.svelte
+// src/components/_tree-expand-all/tree-expand-all.svelte
 import * as $ from "svelte/internal/server";
 
 // src/_internal/tree-context.ts
@@ -61,7 +30,46 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/components/_tree-expand-all/tree-expand-all.svelte
+function Tree_expand_all($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      label = "Tree expansion",
+      expandAllLabel = "Expand all",
+      expandOneLevelLabel = "Expand one level",
+      collapseAllLabel = "Collapse all",
+      safetyThreshold = 500,
+      class: className
+    } = $$props;
+    const context = getTreeContext();
+    const expandDisabled = $.derived(() => context.expandableBranchCount === 0);
+    const collapseDisabled = $.derived(() => !context.hasExpandedItems);
+    const showSafetyValve = $.derived(() => context.expandableBranchCount > safetyThreshold);
+    function expandAll() {
+      if (!expandDisabled())
+        context.expandAll();
+    }
+    function expandOneLevel() {
+      if (!expandDisabled())
+        context.expandOneLevel();
+    }
+    function collapseAll() {
+      if (!collapseDisabled())
+        context.collapseAll();
+    }
+    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-tree-expand-all", className)))}><span class="cinder-tree-expand-all__label">${$.escape(label)}</span> `);
+    if (showSafetyValve()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-tree-expand-all__button"${$.attr("aria-label", `${expandOneLevelLabel}: ${label}`)}${$.attr("disabled", expandDisabled(), true)}>${$.escape(expandOneLevelLabel)}</button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <button type="button" class="cinder-tree-expand-all__button"${$.attr("aria-label", `${expandAllLabel}: ${label}`)}${$.attr("disabled", expandDisabled(), true)}>${$.escape(expandAllLabel)}</button> <button type="button" class="cinder-tree-expand-all__button"${$.attr("aria-label", `${collapseAllLabel}: ${label}`)}${$.attr("disabled", collapseDisabled(), true)}>${$.escape(collapseAllLabel)}</button></div>`);
+  });
+}
+
 // src/components/_tree-select-all/tree-select-all.svelte
+import * as $2 from "svelte/internal/server";
 function Tree_select_all($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
@@ -73,7 +81,7 @@ function Tree_select_all($$renderer, $$props) {
       class: className
     } = $$props;
     const context = getTreeContext();
-    const disabled = $.derived(() => !context.multiselectable || !context.hasSelectableSelectionScope(parentId, includeDescendants));
+    const disabled = $2.derived(() => !context.multiselectable || !context.hasSelectableSelectionScope(parentId, includeDescendants));
     function selectAll() {
       if (!disabled())
         context.selectSelectionScope(parentId, true, includeDescendants);
@@ -82,23 +90,45 @@ function Tree_select_all($$renderer, $$props) {
       if (!disabled())
         context.selectSelectionScope(parentId, false, includeDescendants);
     }
-    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-tree-select-all", className)))}><span class="cinder-tree-select-all__label">${$.escape(label)}</span> <button type="button" class="cinder-tree-select-all__button"${$.attr("aria-label", `${selectAllLabel}: ${label}`)}${$.attr("disabled", disabled(), true)}>${$.escape(selectAllLabel)}</button> <button type="button" class="cinder-tree-select-all__button"${$.attr("aria-label", `${selectNoneLabel}: ${label}`)}${$.attr("disabled", disabled(), true)}>${$.escape(selectNoneLabel)}</button></div>`);
+    $$renderer2.push(`<div${$2.attr_class($2.clsx(classNames("cinder-tree-select-all", className)))}><span class="cinder-tree-select-all__label">${$2.escape(label)}</span> <button type="button" class="cinder-tree-select-all__button"${$2.attr("aria-label", `${selectAllLabel}: ${label}`)}${$2.attr("disabled", disabled(), true)}>${$2.escape(selectAllLabel)}</button> <button type="button" class="cinder-tree-select-all__button"${$2.attr("aria-label", `${selectNoneLabel}: ${label}`)}${$2.attr("disabled", disabled(), true)}>${$2.escape(selectNoneLabel)}</button></div>`);
+  });
+}
+
+// src/components/tree-item/tree-item.svelte
+import * as $4 from "svelte/internal/server";
+import { tick, untrack } from "svelte";
+
+// src/components/_visually-hidden-live-region.svelte
+import * as $3 from "svelte/internal/server";
+function _visually_hidden_live_region($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      message = "",
+      announcementSequence = 0,
+      priority = "polite",
+      class: className
+    } = $$props;
+    let rendered = "";
+    let setTimeoutId = null;
+    let version = 0;
+    let isDestroyed = false;
+    $$renderer2.push(`<div${$3.attr("role", priority === "assertive" ? "alert" : "status")}${$3.attr("aria-live", priority === "assertive" ? "assertive" : "polite")} aria-atomic="true"${$3.attr_class($3.clsx(classNames("cinder-sr-only", className)))}>${$3.escape(rendered)}</div>`);
   });
 }
 
 // src/components/tree-item/tree-item.svelte
-import * as $2 from "svelte/internal/server";
-import { untrack } from "svelte";
 function Tree_item($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const treeItemElementId = $2.props_id($$renderer2);
+    const treeItemElementId = $4.props_id($$renderer2);
     let {
       id,
       label,
       disabled = false,
+      draggable = false,
       branch = false,
       loadChildren,
       onLoadError,
+      onRename,
       selectionScopeIds,
       row,
       children,
@@ -116,17 +146,44 @@ function Tree_item($$renderer, $$props) {
         return level + 1;
       }
     });
-    const isBranch = $2.derived(() => branch || loadChildren != null);
+    const isBranch = $4.derived(() => branch || loadChildren != null);
     let busy = false;
     let loaded = false;
     let activeController = null;
+    let editing = false;
+    let editValue = "";
+    let renamePending = false;
+    let renameError = "";
+    let renameAnnouncement = "";
+    let renameAnnouncementSequence = 0;
+    let probedFilterValue = null;
     let outerElement = undefined;
-    const isExpanded = $2.derived(() => context.expandedIds.includes(id));
-    const isSelected = $2.derived(() => context.selectedIds.includes(id));
-    const isFocused = $2.derived(() => context.focusedId === id);
-    const checkboxSelectionActive = $2.derived(() => context.checkboxSelectionActive());
-    const selectionState = $2.derived(() => context.selectionStateFor(id));
-    const ariaChecked = $2.derived(() => {
+    let renameInputElement = undefined;
+    let dragHandleElement = undefined;
+    let renameOwningTreeElement;
+    const renameMessageId = $4.derived(() => `${treeItemElementId}-rename-message`);
+    const isExpanded = $4.derived(() => context.expandedIds.includes(id));
+    const isSelected = $4.derived(() => context.selectedIds.includes(id));
+    const isFocused = $4.derived(() => context.focusedId === id);
+    const isFiltering = $4.derived(() => context.filtering);
+    const isVisible = $4.derived(() => !isFiltering() || context.isVisible(id) || !context.hasRegisteredItems && (isBranch() || context.matchesFilter(label, id)));
+    const hasVisibleDescendant = $4.derived(() => context.hasVisibleDescendant(id));
+    const renderedExpanded = $4.derived(() => isExpanded() || isFiltering() && hasVisibleDescendant());
+    const shouldProbeFilterChildren = $4.derived(() => isBranch() && isFiltering() && !isExpanded() && probedFilterValue !== context.filterValue);
+    const shouldRenderChildren = $4.derived(() => isBranch() && (isExpanded() || hasVisibleDescendant() || shouldProbeFilterChildren()));
+    const checkboxSelectionActive = $4.derived(() => context.checkboxSelectionActive());
+    const selectionState = $4.derived(() => context.selectionStateFor(id));
+    const labelSegments = $4.derived(() => splitLabelForHighlight(label, context.filterValue));
+    const canRename = $4.derived(() => !disabled && onRename != null);
+    const editingLabel = $4.derived(() => `Editing: ${label}`);
+    const dragController = $4.derived(() => context.dragController);
+    const canDrag = $4.derived(() => draggable && !disabled && dragController() != null);
+    const isDraggingItem = $4.derived(() => dragController()?.isDragging(id) ?? false);
+    const isDropBefore = $4.derived(() => dragController()?.isDropTarget(id, "before") ?? false);
+    const isDropAfter = $4.derived(() => dragController()?.isDropTarget(id, "after") ?? false);
+    const isDropInto = $4.derived(() => dragController()?.isDropTarget(id, "child") ?? false);
+    const dragHandleLabel = $4.derived(() => `Reorder ${label}`);
+    const ariaChecked = $4.derived(() => {
       if (!checkboxSelectionActive())
         return;
       if (selectionState().indeterminate)
@@ -152,6 +209,7 @@ function Tree_item($$renderer, $$props) {
           },
           selectionScopeIds: () => selectionScopeIds,
           isBranch: () => isBranch(),
+          bulkExpandable: () => loadChildren == null,
           label: () => label,
           focus: () => outerElement?.focus()
         });
@@ -212,6 +270,217 @@ function Tree_item($$renderer, $$props) {
       const closestTreeItem = target.closest('[role="treeitem"]');
       return closestTreeItem !== outerElement;
     }
+    const focusRenameInput = (node) => {
+      renameInputElement = node;
+      queueMicrotask(() => {
+        if (!editing || renameInputElement !== node)
+          return;
+        node.focus();
+        node.select();
+      });
+      return () => {
+        if (renameInputElement === node)
+          renameInputElement = undefined;
+      };
+    };
+    function announceRename(message) {
+      renameAnnouncement = message;
+      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 (outerElement?.isConnected) {
+        outerElement.focus();
+        renameOwningTreeElement = undefined;
+        return;
+      }
+      if (typeof document === "undefined")
+        return;
+      const root = renameOwningTreeElement?.isConnected === true ? renameOwningTreeElement : document;
+      const current = [...root.querySelectorAll("[data-cinder-tree-item-id]")].find((element) => element.dataset["cinderTreeItemId"] === id);
+      current?.focus();
+      renameOwningTreeElement = undefined;
+    }
+    function beginEdit() {
+      if (!canRename() || editing)
+        return;
+      editValue = label;
+      renameError = "";
+      renamePending = false;
+      renameOwningTreeElement = outerElement?.closest('[role="tree"]') ?? undefined;
+      editing = true;
+      announceRename(`Editing ${label}. Press Enter to confirm, Escape to cancel.`);
+    }
+    function finishEdit(afterFocus) {
+      editing = false;
+      renameError = "";
+      renamePending = false;
+      queueMicrotask(() => {
+        focusCurrentTreeItem();
+        afterFocus?.();
+      });
+    }
+    function cancelEdit() {
+      editValue = label;
+      announceRename("Rename cancelled.");
+      finishEdit();
+    }
+    async function commitEdit(afterFocus) {
+      if (!editing || renamePending)
+        return false;
+      if (editValue.trim().length === 0) {
+        renameError = "Label is required.";
+        announceRename(renameError);
+        queueMicrotask(() => renameInputElement?.focus());
+        return false;
+      }
+      if (!onRename) {
+        finishEdit(afterFocus);
+        return true;
+      }
+      renamePending = true;
+      renameError = "";
+      try {
+        await onRename(id, editValue);
+        announceRename(`${editValue}, renamed.`);
+        finishEdit(afterFocus);
+        return true;
+      } catch (error) {
+        const message = `Rename failed: ${renameFailureMessage(error)}.`;
+        renamePending = false;
+        renameError = message;
+        announceRename(message);
+        queueMicrotask(() => renameInputElement?.focus());
+        return false;
+      }
+    }
+    async function commitEditAndMove(direction) {
+      await commitEdit(() => context.focusVisibleDelta(id, direction));
+    }
+    function handleRenameInputKeydown(event) {
+      event.stopPropagation();
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commitEdit();
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancelEdit();
+        return;
+      }
+      if (event.key === "Tab") {
+        const direction = event.shiftKey ? -1 : 1;
+        if (context.canFocusVisibleDelta(id, direction)) {
+          event.preventDefault();
+          commitEditAndMove(direction);
+        } else {
+          commitEdit();
+        }
+      }
+    }
+    function handleRenameInputBlur() {
+      commitEdit();
+    }
+    let dragKeyboardReturnTarget;
+    function restoreDragKeyboardFocus() {
+      const target = dragKeyboardReturnTarget ?? dragHandleElement ?? outerElement;
+      queueMicrotask(() => target?.focus());
+    }
+    function canLiftWithKeyboard(event) {
+      const fromDragHandle = event.currentTarget === dragHandleElement;
+      const treeItemShortcut = event.key === " " && event.ctrlKey && event.shiftKey && !event.altKey && !event.metaKey;
+      return fromDragHandle && (event.key === " " || event.key === "Enter") || treeItemShortcut;
+    }
+    function handleDragKeyboard(event) {
+      const controller = dragController();
+      if (!canDrag() || !controller)
+        return false;
+      if (!controller.dragging && canLiftWithKeyboard(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        dragKeyboardReturnTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
+        controller.lift(id, "keyboard");
+        restoreDragKeyboardFocus();
+        return true;
+      }
+      if (!controller.isDragging(id))
+        return false;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.moveBy(1);
+          return true;
+        case "ArrowUp":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.moveBy(-1);
+          return true;
+        case "ArrowRight":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.moveIntoPreviousBranch();
+          return true;
+        case "ArrowLeft":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.moveOut();
+          return true;
+        case "Home":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.moveToEdge("first");
+          return true;
+        case "End":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.moveToEdge("last");
+          return true;
+        case "F2":
+          event.preventDefault();
+          event.stopPropagation();
+          return true;
+        case "Tab":
+          event.stopPropagation();
+          controller.cancel();
+          return true;
+        case " ":
+        case "Enter":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.drop();
+          restoreDragKeyboardFocus();
+          return true;
+        case "Escape":
+          event.preventDefault();
+          event.stopPropagation();
+          controller.cancel();
+          restoreDragKeyboardFocus();
+          return true;
+        default:
+          return false;
+      }
+    }
+    function handleDragPointerDown(event) {
+      const controller = dragController();
+      if (!canDrag() || !controller || event.button !== 0)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      dragHandleElement?.focus();
+      dragHandleElement?.setPointerCapture(event.pointerId);
+      controller.lift(id, "pointer");
+    }
+    function handleDragClick(event) {
+      event.stopPropagation();
+    }
     function toggleKeyboardSelection(event) {
       if (disabled)
         return;
@@ -227,6 +496,13 @@ function Tree_item($$renderer, $$props) {
       if (isInteractiveDescendant(event.target))
         return;
       const key = event.key;
+      if (handleDragKeyboard(event))
+        return;
+      if (key === "F2") {
+        event.preventDefault();
+        beginEdit();
+        return;
+      }
       switch (key) {
         case "ArrowDown":
           event.preventDefault();
@@ -250,7 +526,7 @@ function Tree_item($$renderer, $$props) {
           event.preventDefault();
           if (!isBranch())
             break;
-          if (!isExpanded()) {
+          if (!renderedExpanded()) {
             context.setExpanded(id, true);
           } else {
             context.focusFirstChild(id);
@@ -274,6 +550,10 @@ function Tree_item($$renderer, $$props) {
           break;
         case "Enter":
           event.preventDefault();
+          if (context.selectionMode === "none" && canRename()) {
+            beginEdit();
+            break;
+          }
           if (checkboxSelectionActive()) {
             if (isBranch()) {
               context.setExpanded(id, !isExpanded());
@@ -318,12 +598,19 @@ function Tree_item($$renderer, $$props) {
       if (isInteractiveDescendant(event.target))
         return;
       outerElement?.focus();
+      if (event.detail > 1)
+        return;
       if (!disabled && !checkboxSelectionActive())
         context.toggleSelected(id, event);
       if (isBranch() && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
         context.setExpanded(id, !isExpanded());
       }
     }
+    function handleLabelDoubleClick(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      beginEdit();
+    }
     function handleCheckboxActivation(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -338,7 +625,59 @@ function Tree_item($$renderer, $$props) {
       if (!disabled)
         context.toggleSelectionScope(id);
     }
-    $$renderer2.push(`<div role="treeitem"${$2.attr("id", treeItemElementId)}${$2.attr_class($2.clsx(classNames("cinder-tree-item", className)))}${$2.attr("aria-labelledby", `${treeItemElementId}-label`)}${$2.attr("aria-level", level)}${$2.attr("aria-expanded", isBranch() ? isExpanded() : undefined)}${$2.attr("aria-selected", context.selectionMode === "none" || checkboxSelectionActive() ? undefined : isSelected())}${$2.attr("aria-checked", ariaChecked())}${$2.attr("aria-busy", busy || undefined)}${$2.attr("aria-disabled", disabled || undefined)}${$2.attr("tabindex", isFocused() ? 0 : -1)}${$2.attr("data-cinder-expanded", isBranch() && isExpanded() ? "" : undefined)}${$2.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$2.attr("data-cinder-disabled", disabled ? "" : undefined)}${$2.attr("data-cinder-busy", busy ? "" : undefined)}><span${$2.attr("id", `${treeItemElementId}-label`)} class="cinder-sr-only">${$2.escape(label)}</span> <div class="cinder-tree-item__row">`);
+    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;
+    }
+    function visibleLabel($$renderer3) {
+      $$renderer3.push(`<!--[-->`);
+      const each_array = $4.ensure_array_like(labelSegments());
+      for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+        let segment = each_array[$$index];
+        if (segment.highlighted) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<mark aria-hidden="true" class="cinder-tree-item__highlight">${$4.escape(segment.text)}</mark>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`${$4.escape(segment.text)}`);
+        }
+        $$renderer3.push(`<!--]-->`);
+      }
+      $$renderer3.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<div role="treeitem"${$4.attr("id", treeItemElementId)}${$4.attr_class($4.clsx(classNames("cinder-tree-item", className)))}${$4.attr("aria-label", editing ? editingLabel() : undefined)}${$4.attr("aria-labelledby", editing ? undefined : `${treeItemElementId}-label`)}${$4.attr("aria-level", level)}${$4.attr("aria-expanded", isBranch() ? renderedExpanded() : undefined)}${$4.attr("aria-selected", context.selectionMode === "none" || checkboxSelectionActive() ? undefined : isSelected())}${$4.attr("aria-checked", ariaChecked())}${$4.attr("aria-busy", busy || undefined)}${$4.attr("aria-disabled", disabled || undefined)}${$4.attr("aria-describedby", canDrag() ? context.dragInstructionsId : undefined)}${$4.attr("tabindex", isFocused() ? 0 : -1)}${$4.attr("data-cinder-expanded", isBranch() && isExpanded() ? "" : undefined)}${$4.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$4.attr("data-cinder-disabled", disabled ? "" : undefined)}${$4.attr("data-cinder-busy", busy ? "" : undefined)}${$4.attr("data-cinder-hidden", !isVisible() ? "" : undefined)}${$4.attr("data-cinder-editing", editing ? "" : undefined)}${$4.attr("data-cinder-tree-item-id", id)}${$4.attr("data-cinder-dragging", isDraggingItem() ? "" : undefined)}${$4.attr("data-cinder-drop-target", isDropBefore() ? "before" : isDropAfter() ? "after" : undefined)}${$4.attr("data-cinder-drop-into", isDropInto() ? "" : undefined)}><span${$4.attr("id", `${treeItemElementId}-label`)} class="cinder-sr-only">${$4.escape(label)}</span> <div class="cinder-tree-item__row">`);
+    if (canDrag()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-tree-item__drag-handle"${$4.attr("aria-label", dragHandleLabel())}${$4.attr("aria-pressed", isDraggingItem())}${$4.attr("aria-describedby", context.dragInstructionsId)} tabindex="-1"><span aria-hidden="true">::</span></button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
     if (row) {
       $$renderer2.push("<!--[0-->");
       row($$renderer2, {
@@ -348,34 +687,116 @@ function Tree_item($$renderer, $$props) {
         level,
         checkboxSelection: checkboxSelectionActive(),
         selectionState: selectionState(),
+        editing,
+        beginEdit,
         toggleSelection: toggleSelectionFromRow
       });
       $$renderer2.push(`<!---->`);
-    } else if (checkboxSelectionActive()) {
+    } else if (editing) {
       $$renderer2.push("<!--[1-->");
-      $$renderer2.push(`<input type="checkbox" class="cinder-tree-item__checkbox"${$2.attr("checked", selectionState().checked, true)}${$2.attr("disabled", disabled, true)} tabindex="-1" aria-hidden="true"/> <span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate">${$2.escape(label)}</span>`);
+      $$renderer2.push(`<input type="text" class="cinder-tree-item__rename-input"${$4.attr("value", editValue)}${$4.attr("aria-label", editingLabel())}${$4.attr("aria-invalid", renameError ? "true" : undefined)}${$4.attr("aria-describedby", renameError ? renameMessageId() : undefined)}${$4.attr("disabled", renamePending, true)}/>`);
+    } else if (checkboxSelectionActive()) {
+      $$renderer2.push("<!--[2-->");
+      $$renderer2.push(`<input type="checkbox" class="cinder-tree-item__checkbox"${$4.attr("checked", selectionState().checked, true)}${$4.attr("disabled", disabled, true)} tabindex="-1" aria-hidden="true"/> <span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate">`);
+      visibleLabel($$renderer2);
+      $$renderer2.push(`<!----></span>`);
     } else {
       $$renderer2.push("<!--[-1-->");
-      $$renderer2.push(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate">${$2.escape(label)}</span>`);
+      $$renderer2.push(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate">`);
+      visibleLabel($$renderer2);
+      $$renderer2.push(`<!----></span>`);
     }
     $$renderer2.push(`<!--]--></div> `);
-    if (isBranch() && isExpanded()) {
+    if (renameError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span${$4.attr("id", renameMessageId())} class="cinder-sr-only">${$4.escape(renameError)}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (shouldRenderChildren()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div role="group"${$2.attr("aria-labelledby", treeItemElementId)} class="cinder-tree-item__children">`);
+      $$renderer2.push(`<div role="group"${$4.attr("aria-labelledby", treeItemElementId)} class="cinder-tree-item__children">`);
       children?.($$renderer2);
       $$renderer2.push(`<!----></div>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
+    $$renderer2.push(`<!--]--> `);
+    if (onRename) {
+      $$renderer2.push("<!--[0-->");
+      _visually_hidden_live_region($$renderer2, {
+        message: renameAnnouncement,
+        announcementSequence: renameAnnouncementSequence,
+        priority: "assertive"
+      });
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
     $$renderer2.push(`<!--]--></div>`);
   });
 }
 
 // src/components/tree/tree.svelte
-import * as $4 from "svelte/internal/server";
+import * as $7 from "svelte/internal/server";
+import { tick as tick2, untrack as untrack2 } from "svelte";
+import { SvelteSet } 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/_internal/tree-registry.svelte.ts
-import * as $3 from "svelte/internal/server";
+import * as $5 from "svelte/internal/server";
 import { SvelteMap } from "svelte/reactivity";
 
 // src/utilities/document-order.ts
@@ -396,6 +817,9 @@ function inDocumentOrder(items) {
 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.`);
@@ -420,15 +844,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);
         }
       }
@@ -436,6 +863,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);
   }
@@ -459,14 +906,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++) {
@@ -481,92 +957,1487 @@ class TreeRegistry {
   }
 }
 
-// ../../node_modules/esm-env/false.js
-var false_default = false;
-// ../../node_modules/esm-env/true.js
-var true_default = true;
-// src/utilities/dev-warn.ts
-function devWarn(message, ...args) {
-  if (!true_default)
-    return;
-  console.warn(message, ...args);
-}
+// src/_internal/use-virtualizer.svelte.ts
+import * as $6 from "svelte/internal/server";
 
-// src/components/tree/tree-selection.ts
-function uniqueIds(ids) {
-  return [...new Set(ids)];
-}
-function selectableIds(ids, disabledIds = new Set) {
-  return uniqueIds(ids).filter((id) => !disabledIds.has(id));
-}
-function selectionStateFor(selectedIds, targetIds, disabledIds = new Set) {
-  const targets = selectableIds(targetIds, disabledIds);
-  if (targets.length === 0)
-    return { checked: false, indeterminate: false };
-  const selected = new Set(selectedIds);
-  const selectedCount = targets.filter((id) => selected.has(id)).length;
-  return {
-    checked: selectedCount === targets.length,
-    indeterminate: selectedCount > 0 && selectedCount < targets.length
-  };
+// ../../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, prop, receiver) {
+      if (typeof prop === "string") {
+        const c = prop.charCodeAt(0);
+        if (c >= 48 && c <= 57) {
+          const i = +prop;
+          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 (prop === "length")
+          return count;
+      }
+      return Reflect.get(target, prop, receiver);
+    }
+  });
 }
-function selectIds(selectedIds, targetIds, disabledIds = new Set) {
-  const targets = selectableIds(targetIds, disabledIds);
-  if (targets.length === 0)
-    return [...selectedIds];
-  const existing = new Set(selectedIds);
-  const next = [...selectedIds];
-  for (const id of targets) {
-    if (!existing.has(id)) {
-      existing.add(id);
-      next.push(id);
+
+// ../../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;
   }
-  return next;
-}
-function deselectIds(selectedIds, targetIds, disabledIds = new Set) {
-  const targetSet = new Set(selectableIds(targetIds, disabledIds));
-  if (targetSet.size === 0)
-    return [...selectedIds];
-  return selectedIds.filter((id) => !targetSet.has(id));
-}
-function toggleIndependentId(selectedIds, id, disabledIds = new Set) {
-  if (disabledIds.has(id))
-    return [...selectedIds];
-  return selectedIds.includes(id) ? selectedIds.filter((selectedId) => selectedId !== id) : [...selectedIds, id];
+  memoizedFunction.updateDeps = (newDeps) => {
+    deps = newDeps;
+  };
+  return memoizedFunction;
 }
-function toggleSelectionScope(selectedIds, targetIds, disabledIds = new Set) {
-  const targets = selectableIds(targetIds, disabledIds);
-  if (targets.length === 0)
-    return [...selectedIds];
-  const state = selectionStateFor(selectedIds, targets);
-  return state.checked ? deselectIds(selectedIds, targets, disabledIds) : selectIds(selectedIds, targets, disabledIds);
+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;
 
-// src/components/tree/tree.svelte
-function Tree($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    let {
-      selectionMode = "none",
-      checkboxSelection = false,
-      selectionBehavior = "independent",
-      selectedIds = [],
-      expandedIds = [],
+// ../../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 get = () => {
+        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 = get()) == null || _a.disconnect();
+          _ro = null;
+        },
+        observe: (target) => {
+          var _a;
+          return (_a = get()) == null ? undefined : _a.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a;
+          return (_a = get()) == 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/false.js
+var false_default = false;
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/tree/tree-selection.ts
+function uniqueIds(ids) {
+  return [...new Set(ids)];
+}
+function selectableIds(ids, disabledIds = new Set) {
+  return uniqueIds(ids).filter((id) => !disabledIds.has(id));
+}
+function selectionStateFor(selectedIds, targetIds, disabledIds = new Set) {
+  const targets = selectableIds(targetIds, disabledIds);
+  if (targets.length === 0)
+    return { checked: false, indeterminate: false };
+  const selected = new Set(selectedIds);
+  const selectedCount = targets.filter((id) => selected.has(id)).length;
+  return {
+    checked: selectedCount === targets.length,
+    indeterminate: selectedCount > 0 && selectedCount < targets.length
+  };
+}
+function selectIds(selectedIds, targetIds, disabledIds = new Set) {
+  const targets = selectableIds(targetIds, disabledIds);
+  if (targets.length === 0)
+    return [...selectedIds];
+  const existing = new Set(selectedIds);
+  const next = [...selectedIds];
+  for (const id of targets) {
+    if (!existing.has(id)) {
+      existing.add(id);
+      next.push(id);
+    }
+  }
+  return next;
+}
+function deselectIds(selectedIds, targetIds, disabledIds = new Set) {
+  const targetSet = new Set(selectableIds(targetIds, disabledIds));
+  if (targetSet.size === 0)
+    return [...selectedIds];
+  return selectedIds.filter((id) => !targetSet.has(id));
+}
+function toggleIndependentId(selectedIds, id, disabledIds = new Set) {
+  if (disabledIds.has(id))
+    return [...selectedIds];
+  return selectedIds.includes(id) ? selectedIds.filter((selectedId) => selectedId !== id) : [...selectedIds, id];
+}
+function toggleSelectionScope(selectedIds, targetIds, disabledIds = new Set) {
+  const targets = selectableIds(targetIds, disabledIds);
+  if (targets.length === 0)
+    return [...selectedIds];
+  const state = selectionStateFor(selectedIds, targets);
+  return state.checked ? deselectIds(selectedIds, targets, disabledIds) : selectIds(selectedIds, targets, disabledIds);
+}
+
+// src/components/tree/tree.svelte
+function Tree($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $7.props_id($$renderer2);
+    let {
+      selectionMode = "none",
+      checkboxSelection = false,
+      selectionBehavior = "independent",
+      selectedIds = [],
+      expandedIds = [],
+      ref = undefined,
+      items,
+      virtualized = false,
+      virtualizationEstimatedRowHeight = 36,
+      virtualizationOverscan = 4,
+      virtualizationHeight = "20rem",
+      virtualizedItem,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       disableTypeahead = false,
+      id: idAttribute,
       class: className,
+      style: styleAttribute,
       selectionControls,
-      children
+      filterValue,
+      onFilterChange,
+      filterPlaceholder = "Search tree",
+      showSearch = false,
+      filterPredicate = defaultFilterPredicate,
+      onReorder,
+      children,
+      $$slots,
+      $$events,
+      ...rest
     } = $$props;
+    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 = null;
+    let treeElement = null;
+    let filterInputElement = null;
+    let uncontrolledFilterValue = untrack2(() => filterValue ?? "");
+    let filterStatusAnnouncement = "";
+    let filterStatusAnnouncementSequence = 0;
+    let filterStatusBusy = false;
+    let filterStatusTimer = null;
+    let expansionAnnouncement = "";
+    let expansionAnnouncementSequence = 0;
+    let dragAnnouncement = "";
+    let dragAnnouncementSequence = 0;
+    let dragController = null;
+    let latestDragPointerX = 0;
+    let latestDragPointerY = 0;
+    let dragScrollElement = null;
+    let dragScrollAnimationFrame = null;
     let selectionAnchorId = null;
     let typeaheadBuffer = "";
     let typeaheadTimer = null;
     let hasWarnedNoLabel = false;
-    const visibleIds = $4.derived(() => registry.getVisible(expandedIds));
-    const initialFocusId = $4.derived(() => {
+    let hasWarnedVirtualizedChildren = false;
+    let hasWarnedVirtualizedWithoutItems = false;
+    const resolvedAriaLabel = $7.derived(() => normalizeOptionalText(ariaLabel));
+    const resolvedAriaLabelledBy = $7.derived(() => normalizeOptionalText(ariaLabelledBy));
+    const resolvedFilterPlaceholder = $7.derived(() => normalizeOptionalText(filterPlaceholder) ?? "Search tree");
+    const isFilterControlled = $7.derived(() => filterValue !== undefined);
+    const currentFilterValue = $7.derived(() => isFilterControlled() ? filterValue ?? "" : uncontrolledFilterValue);
+    const normalizedFilterValue = $7.derived(() => currentFilterValue().trim());
+    const filtering = $7.derived(() => normalizedFilterValue().length > 0);
+    const treeId = $7.derived(() => idAttribute ?? `${generatedId}-tree`);
+    const filterInputId = $7.derived(() => `${generatedId}-filter`);
+    const dragInstructionsId = $7.derived(() => `${generatedId}-drag-instructions`);
+    const isVirtualizedTree = $7.derived(() => virtualized && items != null);
+    const flattenedDataItems = $7.derived(() => flattenTreeDataItems(items ?? []));
+    const flattenedDataItemById = $7.derived(() => new Map(flattenedDataItems().map((item) => [item.id, item])));
+    const hasTreeChrome = $7.derived(() => selectionControls != null || showSearch || filtering() || onReorder != null);
+    const hasRegisteredItems = $7.derived(() => isVirtualizedTree() ? flattenedDataItems().length > 0 : registry.size > 0);
+    const activeVisibilityPredicate = $7.derived(() => {
+      if (!filtering())
+        return;
+      const query = normalizedFilterValue();
+      const predicate = filterPredicate;
+      return ({ id, label }) => predicate(label, id, query);
+    });
+    const activeDataVisibilityPredicate = $7.derived(() => {
+      if (!filtering())
+        return;
+      const query = normalizedFilterValue();
+      const predicate = filterPredicate;
+      return (item) => predicate(item.label, item.id, query);
+    });
+    const visibleDataItems = $7.derived(() => visibleTreeDataItems(flattenedDataItems(), expandedIds, activeDataVisibilityPredicate()));
+    const registryVisibleIds = $7.derived(() => registry.getVisible(expandedIds, activeVisibilityPredicate()));
+    const visibleIds = $7.derived(() => isVirtualizedTree() ? visibleDataItems().map((item) => item.id) : registryVisibleIds());
+    const hasNoFilterResults = $7.derived(() => filtering() && hasRegisteredItems() && visibleIds().length === 0);
+    const visibleIdSet = $7.derived(() => new SvelteSet(visibleIds()));
+    const expandableBranchIds = $7.derived(() => isVirtualizedTree() ? flattenedDataItems().filter((item) => item.branch).map((item) => item.id) : registry.getAllBranchIds({ bulkOnly: true }));
+    const expandableBranchCount = $7.derived(() => expandableBranchIds().length);
+    const hasExpandedItems = $7.derived(() => expandedIds.length > 0);
+    const initialFocusId = $7.derived(() => {
       if (selectionMode !== "none" && selectedIds.length > 0) {
         for (const id of visibleIds()) {
           if (selectedIds.includes(id))
@@ -578,15 +2449,112 @@ function Tree($$renderer, $$props) {
     function visibleFocusCandidate(id) {
       return id !== null && visibleIds().includes(id) ? id : null;
     }
-    const effectiveFocusedId = $4.derived(() => {
+    const effectiveFocusedId = $7.derived(() => {
       return visibleFocusCandidate(focusedId) ?? visibleFocusCandidate(initialFocusId()) ?? visibleIds()[0] ?? null;
     });
+    const virtualizer = new TreeVirtualizer({
+      getScrollElement: () => treeElement,
+      getCount: () => visibleDataItems().length,
+      getItemKey: (index) => visibleDataItems()[index]?.id ?? index,
+      getEstimatedSize: () => virtualizationEstimatedRowHeight,
+      getOverscan: () => virtualizationOverscan,
+      getInitialHeight: () => typeof virtualizationHeight === "number" ? virtualizationHeight : virtualizationEstimatedRowHeight * 10
+    });
+    const virtualItems = $7.derived(() => virtualizer.virtualItems);
+    const virtualizedActiveItem = $7.derived(() => effectiveFocusedId() ? flattenedDataItemById().get(effectiveFocusedId()) : undefined);
+    const virtualizedActiveDescendantId = $7.derived(() => isVirtualizedTree() && virtualizedActiveItem() ? virtualItemElementId(virtualizedActiveItem()) : undefined);
+    const virtualRows = $7.derived(() => {
+      const rows = [];
+      const renderedIndexes = new Set;
+      for (const virtualItem of virtualItems()) {
+        const item = visibleDataItems()[virtualItem.index];
+        if (item) {
+          renderedIndexes.add(virtualItem.index);
+          rows.push({ virtualItem, item });
+        }
+      }
+      if (effectiveFocusedId()) {
+        const focusedIndex = visibleIds().indexOf(effectiveFocusedId());
+        const focusedItem = visibleDataItems()[focusedIndex];
+        if (focusedItem && !renderedIndexes.has(focusedIndex)) {
+          const size = virtualizationEstimatedRowHeight;
+          rows.push({
+            item: focusedItem,
+            virtualItem: {
+              key: focusedItem.id,
+              index: focusedIndex,
+              start: focusedIndex * size,
+              end: (focusedIndex + 1) * size,
+              size,
+              lane: 0
+            }
+          });
+        }
+      }
+      rows.sort((a, b) => a.virtualItem.index - b.virtualItem.index);
+      return rows;
+    });
+    function virtualItemElementId(item) {
+      return `${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 = styleAttribute ?? undefined;
+      if (!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) || filtering() && item.branch && visibleDataItems().some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id));
+    }
+    function firstVisibleVirtualizedChildIndex(parentId) {
+      return visibleDataItems().findIndex((item) => item.parentId === parentId);
+    }
+    function focusFirstVirtualizedChild(parentId) {
+      const index = firstVisibleVirtualizedChildIndex(parentId);
+      if (index !== -1)
+        focusVirtualIndex(index);
+    }
     function focusNode(id) {
+      if (isVirtualizedTree()) {
+        const index = visibleIds().indexOf(id);
+        if (index !== -1)
+          focusVirtualIndex(index);
+        return;
+      }
       focusedId = id;
       registry.getNode(id)?.focus();
     }
+    async function focusVirtualIndex(index) {
+      const id = visibleIds()[index];
+      if (!id)
+        return;
+      virtualizer.scrollToIndex(index, { align: "auto" });
+      await tick2();
+      focusedId = id;
+      treeElement?.focus();
+    }
+    function announceExpansion(message) {
+      expansionAnnouncement = message;
+      expansionAnnouncementSequence += 1;
+    }
+    function announceDrag(message) {
+      dragAnnouncement = message;
+      dragAnnouncementSequence += 1;
+    }
     function focusFallbackAfterUnregister(parentId) {
-      const currentVisibleIds = registry.getVisible(expandedIds);
+      const currentVisibleIds = registry.getVisible(expandedIds, activeVisibilityPredicate());
       const selectedVisibleId = selectionMode === "none" ? null : currentVisibleIds.find((id) => selectedIds.includes(id));
       const fallbackId = (parentId && currentVisibleIds.includes(parentId) ? parentId : null) ?? selectedVisibleId ?? currentVisibleIds[0] ?? null;
       if (fallbackId) {
@@ -604,18 +2572,123 @@ function Tree($$renderer, $$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 (isVirtualizedTree()) {
+        const nextIds = withExpandedIds(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 = isVirtualizedTree() ? visibleDataItems().filter((item) => item.branch && item.ancestorIds.every((id) => expandedIdSet.has(id))).map((item) => item.id) : visibleIds().filter((id) => registry.isBulkExpandableBranch(id) && registry.ancestorsOf(id).every((ancestorId) => expandedIdSet.has(ancestorId)));
+      const nextIds = withExpandedIds(visibleBranchIds);
+      if (nextIds.length === expandedIds.length)
+        return;
+      expandedIds = nextIds;
+      announceExpansion("One tree level expanded.");
+    }
+    function focusItem(id) {
+      if (!visibleIds().includes(id))
+        return;
+      focusNode(id);
+    }
+    async function expandToItem(id) {
+      if (isVirtualizedTree()) {
+        const item = 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) {
+      if (isVirtualizedTree()) {
+        const index = visibleIds().indexOf(id);
+        if (index !== -1) {
+          virtualizer.scrollToIndex(index, {
+            align: options?.block === "center" ? "center" : "auto",
+            behavior: options?.behavior === "smooth" ? "smooth" : "auto"
+          });
+        }
+        return;
+      }
+      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 (isVirtualizedTree()) {
+          if (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(state) {
+      if (!checkboxSelectionActive())
+        return;
+      if (state.indeterminate)
+        return "mixed";
+      return state.checked ? "true" : "false";
+    }
     function selectionTargetsFor(id) {
+      if (isVirtualizedTree()) {
+        const item = flattenedDataItemById().get(id);
+        if (!item)
+          return [];
+        return [id, ...descendantTreeDataIds(flattenedDataItems(), id)];
+      }
       const node = registry.getNode(id);
       if (!node)
         return [];
@@ -624,8 +2697,11 @@ function Tree($$renderer, $$props) {
         return [...explicitScopeIds];
       return [id, ...registry.descendantsOf(id)];
     }
+    function childDataItemIds(parentId) {
+      return visibleDataItems().filter((item) => item.parentId === parentId).map((item) => item.id);
+    }
     function selectionTargetsForChildren(parentId, includeDescendants) {
-      const childIds = registry.childrenOf(parentId);
+      const childIds = isVirtualizedTree() ? childDataItemIds(parentId) : registry.childrenOf(parentId);
       if (!includeDescendants)
         return childIds;
       const targets = [];
@@ -643,9 +2719,22 @@ function Tree($$renderer, $$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 = isVirtualizedTree() ? 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]));
+      }
+      selectionAnchorId = id;
+    }
     function toggleSelectedInternal(id, event) {
-      const node = registry.getNode(id);
-      if (!node || node.disabled)
+      const disabled = isVirtualizedTree() ? flattenedDataItemById().get(id)?.disabled ?? true : registry.getNode(id)?.disabled ?? true;
+      if (disabled)
         return;
       if (selectionMode === "none")
         return;
@@ -666,6 +2755,8 @@ function Tree($$renderer, $$props) {
         const start = Math.min(anchorIndex, targetIndex);
         const end = Math.max(anchorIndex, targetIndex);
         const rangeIds = visibleIds().slice(start, end + 1).filter((rangeId) => {
+          if (isVirtualizedTree())
+            return !flattenedDataItemById().get(rangeId)?.disabled;
           const rangeNode = registry.getNode(rangeId);
           return rangeNode && !rangeNode.disabled;
         });
@@ -686,8 +2777,8 @@ function Tree($$renderer, $$props) {
       if (selectionMode !== "multiple")
         return;
       const allVisibleTargets = visibleIds().flatMap((id) => {
-        const node = registry.getNode(id);
-        if (!node || node.disabled)
+        const disabled = isVirtualizedTree() ? flattenedDataItemById().get(id)?.disabled ?? true : registry.getNode(id)?.disabled ?? true;
+        if (disabled)
           return [];
         return selectionBehavior === "cascade" ? selectionTargetsFor(id) : [id];
       });
@@ -696,6 +2787,14 @@ function Tree($$renderer, $$props) {
       if (allVisibleTargets.length > 0)
         selectionAnchorId = allVisibleTargets[0];
     }
+    const treeRef = {
+      expandAll,
+      collapseAll,
+      expandOneLevel,
+      focusItem,
+      expandToItem,
+      scrollToRow
+    };
     const context = {
       get selectionMode() {
         return selectionMode;
@@ -721,6 +2820,27 @@ function Tree($$renderer, $$props) {
       get focusedId() {
         return effectiveFocusedId();
       },
+      get filtering() {
+        return filtering();
+      },
+      get filterValue() {
+        return normalizedFilterValue();
+      },
+      get hasRegisteredItems() {
+        return hasRegisteredItems();
+      },
+      get expandableBranchCount() {
+        return expandableBranchCount();
+      },
+      get hasExpandedItems() {
+        return hasExpandedItems();
+      },
+      get dragController() {
+        return dragController;
+      },
+      get dragInstructionsId() {
+        return dragInstructionsId();
+      },
       isExpanded(id) {
         return expandedIds.includes(id);
       },
@@ -730,20 +2850,19 @@ function Tree($$renderer, $$props) {
       isFocused(id) {
         return effectiveFocusedId() === id;
       },
+      isVisible(id) {
+        return visibleIdSet().has(id);
+      },
+      hasVisibleDescendant(id) {
+        return registry.descendantsOf(id).some((descendantId) => visibleIdSet().has(descendantId));
+      },
+      matchesFilter(label, id) {
+        return filtering() && filterPredicate(label, id, 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]));
-        }
-        selectionAnchorId = id;
+        toggleSelectionScopeInternal(id);
       },
       selectSelectionScope(parentId, next, includeDescendants) {
         if (selectionMode !== "multiple")
@@ -758,6 +2877,12 @@ function Tree($$renderer, $$props) {
       selectionTargetsFor,
       selectionTargetsForChildren,
       setExpanded: setExpandedInternal,
+      expandAll,
+      collapseAll,
+      expandOneLevel,
+      focusItem,
+      expandToItem,
+      scrollToRow,
       toggleSelected: toggleSelectedInternal,
       register(node) {
         const unregister = registry.register(node);
@@ -777,6 +2902,13 @@ function Tree($$renderer, $$props) {
           return;
         focusNode(visibleIds()[nextIndex]);
       },
+      canFocusVisibleDelta(currentId, delta) {
+        const index = visibleIds().indexOf(currentId);
+        if (index === -1)
+          return false;
+        const nextIndex = index + delta;
+        return nextIndex >= 0 && nextIndex < visibleIds().length;
+      },
       focusFirstVisible() {
         if (visibleIds().length > 0)
           focusNode(visibleIds()[0]);
@@ -791,7 +2923,7 @@ function Tree($$renderer, $$props) {
           focusNode(parentId);
       },
       focusFirstChild(currentId) {
-        const childId = registry.firstChildOf(currentId);
+        const childId = registry.childrenOf(currentId).find((id) => visibleIdSet().has(id));
         if (childId)
           focusNode(childId);
       },
@@ -801,7 +2933,7 @@ function Tree($$renderer, $$props) {
         if (typeaheadTimer !== null)
           clearTimeout(typeaheadTimer);
         typeaheadBuffer += char;
-        const match = registry.typeaheadMatch(typeaheadBuffer, currentId, expandedIds);
+        const match = registry.typeaheadMatch(typeaheadBuffer, currentId, expandedIds, activeVisibilityPredicate());
         if (match)
           focusNode(match);
         typeaheadTimer = setTimeout(() => {
@@ -826,31 +2958,393 @@ function Tree($$renderer, $$props) {
     setTreeContextRaw(context);
     setTreeItemParentContextRaw({ parentId: null, level: 1 });
     function handleKeydown(event) {
+      if (isVirtualizedTree() && handleVirtualizedKeydown(event))
+        return;
+      if ((event.metaKey || event.ctrlKey) && event.key === "a") {
+        event.preventDefault();
+        selectAll();
+      }
+      if (event.key === "Escape" && dragController?.dragging) {
+        event.preventDefault();
+        dragController.cancel();
+      }
+    }
+    function currentVirtualIndex() {
+      const index = effectiveFocusedId() ? visibleIds().indexOf(effectiveFocusedId()) : -1;
+      return index === -1 ? 0 : index;
+    }
+    function focusVirtualDelta(delta) {
+      const nextIndex = currentVirtualIndex() + delta;
+      if (nextIndex < 0 || nextIndex >= visibleIds().length)
+        return;
+      focusVirtualIndex(nextIndex);
+    }
+    function applyVirtualizedShiftSelection(currentId, event) {
+      if (!currentId || !event.shiftKey || selectionMode !== "multiple")
+        return;
+      toggleSelectedInternal(currentId, event);
+    }
+    function expandVirtualizedSiblings(currentId) {
+      const currentItem = currentId ? flattenedDataItemById().get(currentId) : undefined;
+      if (!currentItem)
+        return;
+      const siblingBranchIds = 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(event) {
       if ((event.metaKey || event.ctrlKey) && event.key === "a") {
         event.preventDefault();
         selectAll();
+        return true;
+      }
+      const currentId = effectiveFocusedId();
+      const currentItem = currentId ? flattenedDataItemById().get(currentId) : undefined;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          applyVirtualizedShiftSelection(currentId, event);
+          focusVirtualDelta(1);
+          return true;
+        case "ArrowUp":
+          event.preventDefault();
+          applyVirtualizedShiftSelection(currentId, event);
+          focusVirtualDelta(-1);
+          return true;
+        case "Home":
+          event.preventDefault();
+          focusVirtualIndex(0);
+          return true;
+        case "End":
+          event.preventDefault();
+          focusVirtualIndex(visibleIds().length - 1);
+          return true;
+        case "ArrowRight":
+          event.preventDefault();
+          if (!currentItem?.branch)
+            return true;
+          if (!virtualizedItemExpanded(currentItem)) {
+            setExpandedInternal(currentItem.id, true);
+          } else {
+            focusFirstVirtualizedChild(currentItem.id);
+          }
+          return true;
+        case "ArrowLeft":
+          event.preventDefault();
+          if (currentItem?.branch && expandedIds.includes(currentItem.id)) {
+            setExpandedInternal(currentItem.id, false);
+          } else if (currentItem?.parentId) {
+            focusNode(currentItem.parentId);
+          }
+          return true;
+        case "Enter":
+        case " ":
+          if (!currentItem)
+            return false;
+          event.preventDefault();
+          activateVirtualizedItemFromKeyboard(currentItem, event);
+          return true;
+        case "*":
+          event.preventDefault();
+          expandVirtualizedSiblings(currentId);
+          return true;
+        default:
+          return handleVirtualizedTypeahead(event);
+      }
+    }
+    function handleVirtualizedTypeahead(event) {
+      if (disableTypeahead || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) {
+        return false;
+      }
+      event.preventDefault();
+      if (typeaheadTimer !== null)
+        clearTimeout(typeaheadTimer);
+      typeaheadBuffer += event.key.toLowerCase();
+      const startIndex = currentVirtualIndex();
+      for (let offset = 1;offset <= visibleDataItems().length; offset++) {
+        const index = (startIndex + offset) % visibleDataItems().length;
+        const item = visibleDataItems()[index];
+        if (item?.label.toLowerCase().startsWith(typeaheadBuffer)) {
+          focusVirtualIndex(index);
+          break;
+        }
+      }
+      typeaheadTimer = setTimeout(() => {
+        typeaheadBuffer = "";
+        typeaheadTimer = null;
+      }, 500);
+      return true;
+    }
+    function updateFilterValue(next) {
+      if (!isFilterControlled())
+        uncontrolledFilterValue = next;
+      onFilterChange?.(next);
+    }
+    function handleFilterInput(event) {
+      const target = event.currentTarget;
+      updateFilterValue(target.value);
+    }
+    function handleFilterKeydown(event) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const firstVisibleId = visibleIds()[0];
+        if (firstVisibleId)
+          focusNode(firstVisibleId);
+        return;
+      }
+      if (event.key === "Escape" && currentFilterValue().length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        updateFilterValue("");
+        filterInputElement?.focus();
+      }
+    }
+    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;
+      dragController?.setDropTarget(dragController.targetFromPointer(clientY, element));
+    }
+    function stopDragAutoscroll() {
+      if (dragScrollAnimationFrame !== null && typeof cancelAnimationFrame === "function") {
+        cancelAnimationFrame(dragScrollAnimationFrame);
+      }
+      dragScrollAnimationFrame = null;
+      dragScrollElement = null;
+    }
+    function scheduleDragAutoscroll() {
+      if (dragScrollAnimationFrame !== null || !dragController?.pointerDragging || !dragScrollElement || typeof requestAnimationFrame !== "function") {
+        return;
+      }
+      dragScrollAnimationFrame = requestAnimationFrame(() => {
+        dragScrollAnimationFrame = null;
+        const tree = dragScrollElement;
+        if (!dragController?.pointerDragging || !tree)
+          return;
+        const rect = tree.getBoundingClientRect();
+        const edge = 32;
+        const speed = 8;
+        const previousScrollTop = tree.scrollTop;
+        if (latestDragPointerY - rect.top < edge) {
+          tree.scrollTop -= speed;
+        } else if (rect.bottom - latestDragPointerY < edge) {
+          tree.scrollTop += speed;
+        }
+        if (tree.scrollTop === previousScrollTop)
+          return;
+        updateDragTargetFromPointer(latestDragPointerX, latestDragPointerY, tree);
+        scheduleDragAutoscroll();
+      });
+    }
+    function handlePointerMove(event) {
+      if (!dragController?.pointerDragging)
+        return;
+      event.preventDefault();
+      latestDragPointerX = event.clientX;
+      latestDragPointerY = event.clientY;
+      dragScrollElement = event.currentTarget;
+      updateDragTargetFromPointer(event.clientX, event.clientY, event.target);
+      scheduleDragAutoscroll();
+    }
+    function handlePointerUp(event) {
+      if (!dragController?.pointerDragging)
+        return;
+      event.preventDefault();
+      stopDragAutoscroll();
+      dragController.drop();
+    }
+    function handlePointerCancel() {
+      if (!dragController?.pointerDragging)
+        return;
+      stopDragAutoscroll();
+      dragController.cancel();
+    }
+    function handleVirtualizedItemClick(item, event) {
+      focusedId = item.id;
+      treeElement?.focus();
+      if (event.detail > 1)
+        return;
+      if (!item.disabled)
+        toggleSelectedInternal(item.id, event);
+      if (item.branch && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
+        setExpandedInternal(item.id, !expandedIds.includes(item.id));
+      }
+    }
+    function syncVirtualizedCheckboxElement(element, id) {
+      const state = selectionStateForId(id);
+      element.checked = state.checked;
+      element.indeterminate = state.indeterminate && !state.checked;
+    }
+    function handleVirtualizedCheckboxClick(item, event) {
+      event.stopPropagation();
+      focusedId = item.id;
+      treeElement?.focus();
+      toggleSelectionScopeInternal(item.id);
+      const checkbox = event.currentTarget;
+      if (checkbox instanceof HTMLInputElement) {
+        syncVirtualizedCheckboxElement(checkbox, item.id);
+      }
+    }
+    function activateVirtualizedItemFromKeyboard(item, event) {
+      if (item.branch && event.key === "Enter") {
+        setExpandedInternal(item.id, !expandedIds.includes(item.id));
+        if (checkboxSelectionActive())
+          return;
+      }
+      if (checkboxSelectionActive()) {
+        toggleSelectionScopeInternal(item.id);
+      } else {
+        toggleSelectedInternal(item.id, event);
+      }
+    }
+    function handleVirtualizedItemKeydown(item, event) {
+      if (event.key !== "Enter" && event.key !== " ")
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      focusedId = item.id;
+      treeElement?.focus();
+      activateVirtualizedItemFromKeyboard(item, event);
+    }
+    function virtualizedRows($$renderer3) {
+      $$renderer3.push(`<div class="cinder-tree__virtual-spacer"${$7.attr_style(virtualizedSpacerStyle())}><!--[-->`);
+      const each_array = $7.ensure_array_like(virtualRows());
+      for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+        let row = each_array[$$index];
+        const virtualItem = row.virtualItem;
+        const item = row.item;
+        const itemSelectionState = selectionStateForId(item.id);
+        $$renderer3.push(`<div${$7.attr("id", virtualItemElementId(item))} role="treeitem" class="cinder-tree-item cinder-tree-item--virtual"${$7.attr("aria-level", item.level)}${$7.attr("aria-expanded", item.branch ? virtualizedItemExpanded(item) : undefined)}${$7.attr("aria-selected", selectionMode === "none" || checkboxSelectionActive() ? undefined : selectedIds.includes(item.id))}${$7.attr("aria-checked", ariaCheckedForSelectionState(itemSelectionState))}${$7.attr("aria-disabled", item.disabled || undefined)}${$7.attr("aria-setsize", item.setSize)}${$7.attr("aria-posinset", item.posInSet)}${$7.attr("aria-label", item.label)} tabindex="-1"${$7.attr("data-cinder-tree-item-id", item.id)}${$7.attr("data-cinder-expanded", item.branch && virtualizedItemExpanded(item) ? "" : undefined)}${$7.attr("data-cinder-selected", selectedIds.includes(item.id) ? "" : undefined)}${$7.attr("data-cinder-disabled", item.disabled ? "" : undefined)}${$7.attr("data-cinder-focused", effectiveFocusedId() === item.id ? "" : undefined)}${$7.attr("data-cinder-virtual-index", virtualItem.index)}${$7.attr_style(virtualizedRowStyle(virtualItem.start, virtualItem.size))}><div class="cinder-tree-item__row"${$7.attr_style(`padding-inline-start: ${item.level * 1.25}rem;`)}>`);
+        if (checkboxSelectionActive()) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<input type="checkbox" class="cinder-tree-item__checkbox"${$7.attr("checked", itemSelectionState.checked, true)}${$7.attr("disabled", item.disabled, true)} tabindex="-1" aria-hidden="true"/>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--> `);
+        if (virtualizedItem) {
+          $$renderer3.push("<!--[0-->");
+          virtualizedItem($$renderer3, {
+            item,
+            expanded: virtualizedItemExpanded(item),
+            selected: selectedIds.includes(item.id),
+            focused: effectiveFocusedId() === item.id
+          });
+          $$renderer3.push(`<!---->`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<span class="cinder-tree-item__label cinder-_truncate">${$7.escape(item.label)}</span>`);
+        }
+        $$renderer3.push(`<!--]--></div></div>`);
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    function treeBody($$renderer3) {
+      $$renderer3.push(`<div${$7.attributes({
+        ...rest,
+        id: treeId(),
+        role: "tree",
+        tabindex: isVirtualizedTree() ? 0 : -1,
+        class: $7.clsx(classNames("cinder-tree", className)),
+        style: treeStyle(),
+        "aria-label": resolvedAriaLabel(),
+        "aria-labelledby": resolvedAriaLabelledBy(),
+        "aria-activedescendant": virtualizedActiveDescendantId(),
+        "aria-multiselectable": selectionMode === "multiple" ? true : undefined,
+        "aria-busy": filterStatusBusy || undefined,
+        "data-cinder-checkbox-selection": checkboxSelectionActive() ? "" : undefined,
+        "data-cinder-virtualized": isVirtualizedTree() ? "" : undefined
+      })}>`);
+      if (isVirtualizedTree()) {
+        $$renderer3.push("<!--[0-->");
+        virtualizedRows($$renderer3);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+        children?.($$renderer3);
+        $$renderer3.push(`<!---->`);
       }
+      $$renderer3.push(`<!--]--></div>`);
     }
-    if (selectionControls) {
+    if (hasTreeChrome()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div class="cinder-tree-root"><div class="cinder-tree__selection-controls">`);
-      selectionControls($$renderer2);
-      $$renderer2.push(`<!----></div> <div role="tree" tabindex="-1"${$4.attr_class($4.clsx(classNames("cinder-tree", className)))}${$4.attr("aria-label", ariaLabel)}${$4.attr("aria-labelledby", ariaLabelledBy)}${$4.attr("aria-multiselectable", selectionMode === "multiple" ? true : undefined)}${$4.attr("data-cinder-checkbox-selection", checkboxSelectionActive() ? "" : undefined)}>`);
-      children($$renderer2);
-      $$renderer2.push(`<!----></div></div>`);
+      $$renderer2.push(`<div class="cinder-tree-root">`);
+      if (showSearch) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-tree__filter"><label class="cinder-sr-only"${$7.attr("for", filterInputId())}>${$7.escape(resolvedFilterPlaceholder())}</label> <input${$7.attr("id", filterInputId())} class="cinder-tree__filter-input" type="search"${$7.attr("value", currentFilterValue())}${$7.attr("placeholder", resolvedFilterPlaceholder())}${$7.attr("aria-label", resolvedFilterPlaceholder())}${$7.attr("aria-controls", treeId())} autocomplete="off" autocorrect="off"${$7.attr("spellcheck", false)}/></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (selectionControls) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-tree__selection-controls">`);
+        selectionControls($$renderer2);
+        $$renderer2.push(`<!----></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (onReorder) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div${$7.attr("id", dragInstructionsId())} 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>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      treeBody($$renderer2);
+      $$renderer2.push(`<!----> `);
+      if (hasNoFilterResults()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-tree__empty" role="none">No results</div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      _visually_hidden_live_region($$renderer2, {
+        message: filterStatusAnnouncement,
+        announcementSequence: filterStatusAnnouncementSequence,
+        priority: "polite"
+      });
+      $$renderer2.push(`<!----> `);
+      if (onReorder) {
+        $$renderer2.push("<!--[0-->");
+        _visually_hidden_live_region($$renderer2, {
+          message: dragAnnouncement,
+          announcementSequence: dragAnnouncementSequence,
+          priority: "assertive"
+        });
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
     } else {
       $$renderer2.push("<!--[-1-->");
-      $$renderer2.push(`<div role="tree" tabindex="-1"${$4.attr_class($4.clsx(classNames("cinder-tree", className)))}${$4.attr("aria-label", ariaLabel)}${$4.attr("aria-labelledby", ariaLabelledBy)}${$4.attr("aria-multiselectable", selectionMode === "multiple" ? true : undefined)}${$4.attr("data-cinder-checkbox-selection", checkboxSelectionActive() ? "" : undefined)}>`);
-      children($$renderer2);
-      $$renderer2.push(`<!----></div>`);
+      treeBody($$renderer2);
     }
-    $$renderer2.push(`<!--]-->`);
-    $4.bind_props($$props, { selectedIds, expandedIds });
+    $$renderer2.push(`<!--]--> `);
+    _visually_hidden_live_region($$renderer2, {
+      message: expansionAnnouncement,
+      announcementSequence: expansionAnnouncementSequence,
+      priority: "polite"
+    });
+    $$renderer2.push(`<!---->`);
+    $7.bind_props($$props, { selectedIds, expandedIds, ref });
   });
 }
 
 // src/components/tree/index.ts
 var Tree2 = Object.assign(Tree, {
+  ExpandAll: Tree_expand_all,
   Item: Tree_item,
   SelectAll: Tree_select_all
 });
@@ -860,4 +3354,4 @@ export {
   Tree2 as Tree
 };
 
-//# debugId=8DE5231D0D6BBAAE64756E2164756E21
+//# debugId=3D1583A37F0759C664756E2164756E21