@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-MDQYRES4.js

@@ -0,0 +1,796 @@
+"use client";
+import {
+  useTreeKeyboard
+} from "./chunk-ZI2OXD6L.js";
+import {
+  Spinner
+} from "./chunk-W7OIVERI.js";
+import {
+  Checkbox
+} from "./chunk-K4V2ELUZ.js";
+import {
+  Skeleton
+} from "./chunk-UPGIQXUY.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/tree/tree.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronRight, AlertCircle, RotateCcw } from "lucide-react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useControllableSet(controlled, defaultValue, onChange) {
+  const isControlled = controlled !== void 0;
+  const [internal, setInternal] = useState(
+    () => new Set(controlled ?? defaultValue ?? [])
+  );
+  const controlledSetRef = useRef(null);
+  let value;
+  if (isControlled) {
+    const prev = controlledSetRef.current;
+    const sameContent = !!prev && prev.size === controlled.length && controlled.every((id) => prev.has(id));
+    value = sameContent ? prev : new Set(controlled);
+    controlledSetRef.current = value;
+  } else {
+    value = internal;
+  }
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(Array.from(next));
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function reconcileNodes(propNodes, prevNodes) {
+  const prevById = new Map(prevNodes.map((n) => [n.id, n]));
+  return propNodes.map((n) => {
+    const prev = prevById.get(n.id);
+    if (!prev) return n;
+    if (!n.children?.length && prev.children?.length) {
+      return { ...n, children: prev.children, hasChildren: n.hasChildren };
+    }
+    if (n.children?.length && prev.children?.length) {
+      return { ...n, children: reconcileNodes(n.children, prev.children) };
+    }
+    return n;
+  });
+}
+function mergeChildren(nodes, nodeId, children) {
+  return nodes.map((n) => {
+    if (n.id === nodeId) {
+      return { ...n, children, hasChildren: void 0 };
+    }
+    if (n.children?.length) {
+      return { ...n, children: mergeChildren(n.children, nodeId, children) };
+    }
+    return n;
+  });
+}
+function VirtualFlatRow({
+  row,
+  isExpanded,
+  isSelected,
+  isActive,
+  lazyState,
+  expandable,
+  selectionMode,
+  checkboxes,
+  surface,
+  onToggleExpand,
+  onSelect,
+  onRetry,
+  registerNodeRef,
+  setActiveId
+}) {
+  const { t } = useLocale();
+  const { node, level, setSize, posInSet } = row;
+  const isLoading = lazyState === "loading";
+  const isError = lazyState === "error";
+  const labelId = useId();
+  const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };
+  const handleRowClick = () => {
+    if (node.disabled) return;
+    setActiveId(node.id);
+    onSelect(node.id);
+    if (expandable) onToggleExpand(node.id);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-expanded": expandable ? isExpanded : void 0,
+      "aria-selected": selectionMode !== "none" && !checkboxes ? isSelected : void 0,
+      "aria-checked": checkboxes ? isSelected : void 0,
+      "aria-label": typeof node.label === "string" ? node.label : void 0,
+      "aria-labelledby": typeof node.label === "string" ? void 0 : labelId,
+      "aria-level": level,
+      "aria-setsize": setSize,
+      "aria-posinset": posInSet,
+      "aria-disabled": node.disabled ? true : void 0,
+      "aria-busy": isLoading ? true : void 0,
+      tabIndex: isActive ? 0 : -1,
+      "data-tree-id": node.id,
+      ref: (el) => registerNodeRef(node.id, el),
+      onClick: node.disabled ? void 0 : handleRowClick,
+      onFocus: () => setActiveId(node.id),
+      className: cn(
+        "flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-md px-2 py-1.5 text-body outline-none",
+        "transition-colors duration-fast ease-standard motion-reduce:transition-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        isSelected && selectionMode !== "none" && (surface === "sidebar" ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium" : "bg-selection text-selection-foreground font-medium"),
+        node.disabled && "cursor-not-allowed opacity-50 pointer-events-none"
+      ),
+      style: indentStyle,
+      children: [
+        expandable ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggleExpand(node.id);
+            },
+            className: cn(
+              "flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-fast ease-standard motion-reduce:transition-none",
+              isExpanded && "rotate-90"
+            ),
+            children: isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-3.5", label: "Loading children" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" })
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-4 shrink-0" }),
+        checkboxes && selectionMode === "multiple" && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: isSelected,
+            disabled: node.disabled,
+            "aria-hidden": "true",
+            tabIndex: -1,
+            onClick: (e) => {
+              e.stopPropagation();
+              onSelect(node.id);
+            },
+            className: "shrink-0"
+          }
+        ),
+        node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-4 shrink-0 items-center justify-center", children: node.icon }),
+        isError ? (
+          // #124: running text ("Failed to load…"), not a mark — the ink rung
+          // clears >=4.5:1 and the wrapped icon inherits it fine (>=3:1 trivially).
+          /* @__PURE__ */ jsxs("span", { id: labelId, className: "min-w-0 flex items-center gap-1 text-destructive-text", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: t("ui.tree.failedToLoad") }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("ui.tree.retryLoadingChildren"),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRetry(node.id);
+                },
+                className: cn(
+                  "ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-caption",
+                  "text-muted-foreground hover:text-foreground",
+                  "focus-ring"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(RotateCcw, { className: "size-3", "aria-hidden": "true" }),
+                  t("ui.tree.retry")
+                ]
+              }
+            )
+          ] })
+        ) : /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 truncate", children: node.label }),
+        node.accessory ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "tree-item-accessory",
+            className: "ms-auto flex shrink-0 items-center gap-1",
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => e.stopPropagation(),
+            onFocus: (e) => e.stopPropagation(),
+            children: node.accessory
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function LoadingRow({ level }) {
+  const { t } = useLocale();
+  const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-label": t("loading"),
+      "aria-disabled": "true",
+      tabIndex: -1,
+      className: "flex min-w-0 items-center gap-1.5 px-2 py-1.5",
+      style: indentStyle,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+      ]
+    }
+  );
+}
+function ErrorRow({ level, onRetry }) {
+  const { t } = useLocale();
+  const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-label": t("ui.tree.failedToLoad"),
+      "aria-disabled": "true",
+      tabIndex: -1,
+      className: "flex min-w-0 items-center gap-1.5 px-2 py-1.5 text-body text-destructive-text",
+      style: indentStyle,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: t("ui.tree.failedToLoad") }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRetry();
+            },
+            className: cn(
+              "ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-meta",
+              "text-muted-foreground hover:text-foreground",
+              "focus-ring"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(RotateCcw, { className: "size-3", "aria-hidden": "true" }),
+              t("ui.tree.retry")
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TreeItem({
+  node,
+  level,
+  setSize,
+  posInSet,
+  expandedIds,
+  onExpandedChange,
+  selectionMode,
+  selectedIds,
+  onSelectionChange,
+  checkboxes,
+  surface,
+  activeId,
+  setActiveId,
+  registerNodeRef,
+  lazyState,
+  onExpandLazy
+}) {
+  const hasLoadedChildren = !!node.children?.length;
+  const expandable = hasLoadedChildren || !!node.hasChildren;
+  const isExpanded = expandable && expandedIds.has(node.id);
+  const isSelected = selectedIds.has(node.id);
+  const isActive = activeId === node.id;
+  const nodeLoadState = lazyState[node.id] ?? "idle";
+  const isLoading = nodeLoadState === "loading";
+  const isError = nodeLoadState === "error";
+  const labelId = useId();
+  const toggleExpanded = () => {
+    if (!expandable) return;
+    const next = new Set(expandedIds);
+    if (isExpanded) {
+      next.delete(node.id);
+    } else {
+      next.add(node.id);
+      if (!hasLoadedChildren && node.hasChildren) {
+        onExpandLazy(node);
+      }
+    }
+    onExpandedChange(next);
+  };
+  const handleSelect = () => {
+    if (node.disabled || selectionMode === "none") return;
+    setActiveId(node.id);
+    if (selectionMode === "single") {
+      onSelectionChange(/* @__PURE__ */ new Set([node.id]));
+    } else {
+      const next = new Set(selectedIds);
+      if (next.has(node.id)) {
+        next.delete(node.id);
+      } else {
+        next.add(node.id);
+      }
+      onSelectionChange(next);
+    }
+  };
+  const handleRowClick = () => {
+    setActiveId(node.id);
+    handleSelect();
+    if (expandable) toggleExpanded();
+  };
+  const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };
+  return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "treeitem",
+        "aria-expanded": expandable ? isExpanded : void 0,
+        "aria-selected": selectionMode !== "none" && !checkboxes ? isSelected : void 0,
+        "aria-checked": checkboxes ? isSelected : void 0,
+        "aria-label": typeof node.label === "string" ? node.label : void 0,
+        "aria-labelledby": typeof node.label === "string" ? void 0 : labelId,
+        "aria-level": level,
+        "aria-setsize": setSize,
+        "aria-posinset": posInSet,
+        "aria-disabled": node.disabled ? true : void 0,
+        "aria-busy": isLoading ? true : void 0,
+        tabIndex: isActive ? 0 : -1,
+        "data-tree-id": node.id,
+        ref: (el) => registerNodeRef(node.id, el),
+        onClick: node.disabled ? void 0 : handleRowClick,
+        onFocus: () => setActiveId(node.id),
+        className: cn(
+          "flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-md px-2 py-1.5 text-body outline-none",
+          "transition-colors duration-fast ease-standard motion-reduce:transition-none",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          isSelected && selectionMode !== "none" && (surface === "sidebar" ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium" : "bg-selection text-selection-foreground font-medium"),
+          node.disabled && "cursor-not-allowed opacity-50 pointer-events-none"
+        ),
+        style: indentStyle,
+        children: [
+          expandable ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleExpanded();
+              },
+              className: cn(
+                "flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-fast ease-standard motion-reduce:transition-none",
+                isExpanded && !isLoading && "rotate-90"
+              ),
+              children: isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-3.5", label: "Loading children" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" })
+            }
+          ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-4 shrink-0" }),
+          checkboxes && selectionMode === "multiple" && /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isSelected,
+              disabled: node.disabled,
+              "aria-hidden": "true",
+              tabIndex: -1,
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSelect();
+              },
+              className: "shrink-0"
+            }
+          ),
+          node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-4 shrink-0 items-center justify-center", children: node.icon }),
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 truncate", children: node.label }),
+          node.accessory ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "tree-item-accessory",
+              className: "ms-auto flex shrink-0 items-center gap-1",
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              onFocus: (e) => e.stopPropagation(),
+              children: node.accessory
+            }
+          ) : null
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: "list-none m-0 p-0", children: isLoading ? /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(LoadingRow, { level: level + 1 }) }) : isError ? /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(ErrorRow, { level: level + 1, onRetry: () => onExpandLazy(node) }) }) : node.children?.map((child, i) => /* @__PURE__ */ jsx(
+      TreeItem,
+      {
+        node: child,
+        level: level + 1,
+        setSize: node.children.length,
+        posInSet: i + 1,
+        expandedIds,
+        onExpandedChange,
+        selectionMode,
+        selectedIds,
+        onSelectionChange,
+        checkboxes,
+        surface,
+        activeId,
+        setActiveId,
+        registerNodeRef,
+        lazyState,
+        onExpandLazy
+      },
+      child.id
+    )) })
+  ] });
+}
+function flattenVisibleWithMeta(nodes, expandedIds, lazyState, level = 1, parentSetSize) {
+  const result = [];
+  const setSize = parentSetSize ?? nodes.length;
+  nodes.forEach((node, i) => {
+    result.push({
+      node,
+      level,
+      setSize,
+      posInSet: i + 1
+    });
+    const hasLoadedChildren = !!node.children?.length;
+    const isExpandable = hasLoadedChildren || !!node.hasChildren;
+    if (isExpandable && expandedIds.has(node.id)) {
+      const nodeLoad = lazyState[node.id];
+      if (nodeLoad === "loading" || nodeLoad === "error") {
+      } else if (hasLoadedChildren) {
+        const childRows = flattenVisibleWithMeta(
+          node.children,
+          expandedIds,
+          lazyState,
+          level + 1,
+          node.children.length
+        );
+        result.push(...childRows);
+      }
+    }
+  });
+  return result;
+}
+function findNodePath(nodes, id, trail = []) {
+  for (const n of nodes) {
+    if (n.id === id) return trail;
+    if (n.children?.length) {
+      const found = findNodePath(n.children, id, [...trail, n.id]);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function findNodeById(nodes, id) {
+  for (const n of nodes) {
+    if (n.id === id) return n;
+    if (n.children?.length) {
+      const found = findNodeById(n.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+var Tree = forwardRef(function Tree2({
+  nodes: nodesProp,
+  expandedIds: expandedIdsProp,
+  defaultExpandedIds,
+  onExpandedChange,
+  selectionMode = "single",
+  selectedIds: selectedIdsProp,
+  defaultSelectedIds,
+  onSelectionChange,
+  checkboxes = false,
+  virtualize = false,
+  estimateRowHeight = 32,
+  overscan = 8,
+  maxHeight,
+  scrollToId,
+  scrollSelectionIntoView = false,
+  loadChildren,
+  surface = "default",
+  className,
+  ...props
+}, ref) {
+  const [nodes, setNodes] = useState(() => nodesProp);
+  useEffect(() => {
+    setNodes((prev) => reconcileNodes(nodesProp, prev));
+  }, [nodesProp]);
+  const [expandedIds, setExpandedIds] = useControllableSet(
+    expandedIdsProp,
+    defaultExpandedIds,
+    onExpandedChange
+  );
+  const [selectedIds, setSelectedIds] = useControllableSet(
+    selectedIdsProp,
+    defaultSelectedIds,
+    onSelectionChange
+  );
+  const [lazyState, setLazyState] = useState({});
+  const scrollRef = useRef(null);
+  const pendingFocusIdRef = useRef(null);
+  const handleExpandLazy = useCallback(
+    async (node) => {
+      if (!loadChildren) return;
+      if (lazyState[node.id] === "loading") return;
+      setLazyState((prev) => ({ ...prev, [node.id]: "loading" }));
+      try {
+        const children = await loadChildren(node);
+        setNodes((prev) => mergeChildren(prev, node.id, children));
+        setLazyState((prev) => {
+          const next = { ...prev };
+          delete next[node.id];
+          return next;
+        });
+      } catch {
+        setLazyState((prev) => ({ ...prev, [node.id]: "error" }));
+      }
+    },
+    [loadChildren, lazyState]
+  );
+  const flatRows = useMemo(
+    () => flattenVisibleWithMeta(nodes, expandedIds, lazyState),
+    [nodes, expandedIds, lazyState]
+  );
+  const flatNodeIds = useMemo(() => flatRows.map((r) => r.node.id), [flatRows]);
+  const flatRowIndexById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    flatRows.forEach((r, i) => map.set(r.node.id, i));
+    return map;
+  }, [flatRows]);
+  const virtualizerRef = useRef(null);
+  const scrollToVirtualIndex = useCallback((index) => {
+    virtualizerRef.current?.scrollToIndex(index, { align: "auto" });
+  }, []);
+  const { activeId, setActiveId, registerNodeRef, onKeyDown } = useTreeKeyboard({
+    nodes,
+    expandedIds,
+    onExpandedChange: setExpandedIds,
+    selectionMode,
+    selectedIds,
+    onSelectionChange: setSelectedIds,
+    // Virtualization-aware extras
+    virtualize,
+    flatNodeIds,
+    pendingFocusIdRef,
+    scrollToVirtualIndex
+  });
+  const handleToggleExpand = useCallback(
+    (nodeId) => {
+      const index = flatRowIndexById.get(nodeId);
+      if (index === void 0) return;
+      const node = flatRows[index]?.node;
+      if (!node) return;
+      const hasLoadedChildren = !!node.children?.length;
+      const next = new Set(expandedIds);
+      if (expandedIds.has(nodeId)) {
+        next.delete(nodeId);
+      } else {
+        next.add(nodeId);
+        if (!hasLoadedChildren && node.hasChildren && loadChildren) {
+          handleExpandLazy(node);
+        }
+      }
+      setExpandedIds(next);
+    },
+    [expandedIds, flatRows, flatRowIndexById, setExpandedIds, loadChildren, handleExpandLazy]
+  );
+  const handleSelectVirtual = useCallback(
+    (nodeId) => {
+      const index = flatRowIndexById.get(nodeId);
+      if (index === void 0) return;
+      const node = flatRows[index]?.node;
+      if (!node || node.disabled || selectionMode === "none") return;
+      if (selectionMode === "single") {
+        setSelectedIds(/* @__PURE__ */ new Set([nodeId]));
+      } else {
+        const next = new Set(selectedIds);
+        if (next.has(nodeId)) {
+          next.delete(nodeId);
+        } else {
+          next.add(nodeId);
+        }
+        setSelectedIds(next);
+      }
+    },
+    [flatRows, flatRowIndexById, selectionMode, selectedIds, setSelectedIds]
+  );
+  const nodeRefsForFlush = useRef(/* @__PURE__ */ new Map());
+  const registerAndFlush = useCallback(
+    (id, el) => {
+      registerNodeRef(id, el);
+      if (el) {
+        nodeRefsForFlush.current.set(id, el);
+        if (pendingFocusIdRef.current === id) {
+          pendingFocusIdRef.current = null;
+          el.focus();
+        }
+      } else {
+        nodeRefsForFlush.current.delete(id);
+      }
+    },
+    [registerNodeRef]
+  );
+  const virtualizer = useVirtualizer({
+    count: flatRows.length,
+    getScrollElement: () => virtualize ? scrollRef.current : null,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    enabled: virtualize
+  });
+  useEffect(() => {
+    if (virtualize) {
+      virtualizerRef.current = virtualizer;
+    }
+  });
+  const pendingRevealIdRef = useRef(null);
+  const prevSelectedRef = useRef(selectedIds);
+  const prevScrollToIdRef = useRef(void 0);
+  const scrollNodeIntoView = useCallback(
+    (id) => {
+      const index = flatRowIndexById.get(id);
+      if (index === void 0) return false;
+      if (virtualize) {
+        virtualizerRef.current?.scrollToIndex(index, { align: "center" });
+      } else {
+        nodeRefsForFlush.current.get(id)?.scrollIntoView?.({ block: "center" });
+      }
+      return true;
+    },
+    [flatRowIndexById, virtualize]
+  );
+  const revealNode = useCallback(
+    (id) => {
+      if (scrollNodeIntoView(id)) {
+        pendingRevealIdRef.current = null;
+        return;
+      }
+      pendingRevealIdRef.current = id;
+      const path = findNodePath(nodes, id);
+      if (!path || path.length === 0) return;
+      const next = new Set(expandedIds);
+      path.forEach((ancestorId) => next.add(ancestorId));
+      setExpandedIds(next);
+      if (loadChildren) {
+        for (const ancestorId of path) {
+          const anc = findNodeById(nodes, ancestorId);
+          if (anc && anc.hasChildren && !anc.children?.length) void handleExpandLazy(anc);
+        }
+      }
+    },
+    [scrollNodeIntoView, nodes, expandedIds, setExpandedIds, loadChildren, handleExpandLazy]
+  );
+  const revealNodeRef = useRef(revealNode);
+  revealNodeRef.current = revealNode;
+  useEffect(() => {
+    const scrollIdChanged = scrollToId !== prevScrollToIdRef.current;
+    const selectionChanged = selectedIds !== prevSelectedRef.current;
+    const prevSel = prevSelectedRef.current;
+    prevScrollToIdRef.current = scrollToId;
+    prevSelectedRef.current = selectedIds;
+    if (scrollToId != null && scrollIdChanged) {
+      revealNodeRef.current(scrollToId);
+    } else if (scrollToId == null && scrollSelectionIntoView && selectionChanged) {
+      const added = [...selectedIds].find((sid) => !prevSel.has(sid));
+      const target = added ?? (selectedIds.size > 0 ? [...selectedIds][0] : void 0);
+      if (target != null) revealNodeRef.current(target);
+    }
+  }, [scrollToId, scrollSelectionIntoView, selectedIds]);
+  useEffect(() => {
+    const id = pendingRevealIdRef.current;
+    if (id != null && scrollNodeIntoView(id)) {
+      pendingRevealIdRef.current = null;
+    }
+  }, [scrollNodeIntoView]);
+  if (!virtualize) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tree",
+        "aria-multiselectable": selectionMode === "multiple" ? true : void 0,
+        onKeyDown,
+        className: cn("w-full select-none", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("ul", { role: "none", className: "m-0 list-none p-0", children: nodes.map((node, i) => /* @__PURE__ */ jsx(
+          TreeItem,
+          {
+            node,
+            level: 1,
+            setSize: nodes.length,
+            posInSet: i + 1,
+            expandedIds,
+            onExpandedChange: setExpandedIds,
+            selectionMode,
+            selectedIds,
+            onSelectionChange: setSelectedIds,
+            checkboxes,
+            surface,
+            activeId,
+            setActiveId,
+            registerNodeRef: registerAndFlush,
+            lazyState,
+            onExpandLazy: handleExpandLazy
+          },
+          node.id
+        )) })
+      }
+    );
+  }
+  const virtualItems = virtualizer.getVirtualItems();
+  const scrollStyle = maxHeight ? { maxHeight, overflowY: "auto" } : { overflowY: "auto" };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tree",
+      "aria-multiselectable": selectionMode === "multiple" ? true : void 0,
+      onKeyDown,
+      className: cn("w-full select-none", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { ref: scrollRef, role: "presentation", style: scrollStyle, className: "outline-none", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "presentation",
+          style: { height: virtualizer.getTotalSize(), position: "relative" },
+          children: virtualItems.map((virtualRow) => {
+            const row = flatRows[virtualRow.index];
+            if (!row) return null;
+            const { node } = row;
+            const hasLoadedChildren = !!node.children?.length;
+            const expandable = hasLoadedChildren || !!node.hasChildren;
+            const isExpanded = expandable && expandedIds.has(node.id);
+            const isSelected = selectedIds.has(node.id);
+            const isActive = activeId === node.id;
+            const nodeLoad = lazyState[node.id] ?? "idle";
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "presentation",
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: `${virtualRow.size}px`,
+                  transform: `translateY(${virtualRow.start}px)`
+                },
+                children: /* @__PURE__ */ jsx(
+                  VirtualFlatRow,
+                  {
+                    row,
+                    isExpanded,
+                    isSelected,
+                    isActive,
+                    lazyState: nodeLoad,
+                    expandable,
+                    selectionMode,
+                    checkboxes,
+                    surface,
+                    onToggleExpand: handleToggleExpand,
+                    onSelect: handleSelectVirtual,
+                    onRetry: () => handleExpandLazy(node),
+                    registerNodeRef: registerAndFlush,
+                    setActiveId
+                  }
+                )
+              },
+              virtualRow.key
+            );
+          })
+        }
+      ) })
+    }
+  );
+});
+
+export {
+  Tree
+};
+//# sourceMappingURL=chunk-MDQYRES4.js.map