@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/top-nav/top-nav.tsx

@@ -4,31 +4,61 @@ import { cn } from "../../lib/cn";
 export interface TopNavProps extends HTMLAttributes<HTMLElement> {
   /** Left slot (brand on mobile, breadcrumbs, title). */
   start?: ReactNode;
+  /**
+   * Centred slot (e.g. a global search field, or horizontal primary
+   * navigation). Laid out as the middle column of a 3-column grid, so it
+   * stays visually centred in the bar regardless of how wide `start`/`end`
+   * are — plain `flex-1` filler only centres content when both sides are
+   * equal width. Passing `center` switches the bar to this grid layout and
+   * `children` is ignored (pass everything through `start`/`center`/`end`
+   * instead); omit `center` to keep the original `start` / `children` / `end`
+   * flex row unchanged.
+   */
+  center?: ReactNode;
   /** Right slot (search, actions, account menu). */
   end?: ReactNode;
 }
 
 /** Application top bar. Sticky, single row, brand-neutral. */
 export const TopNav = forwardRef<HTMLElement, TopNavProps>(function TopNav(
-  { className, start, end, children, ...props },
+  { className, start, center, end, children, ...props },
   ref,
 ) {
   return (
     <header
       ref={ref}
       className={cn(
-        "sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-surface-elevated/80 px-4 backdrop-blur",
+        "sticky top-0 z-30 flex h-header items-center gap-4 border-b bg-surface-elevated/80 px-4 backdrop-blur",
         className,
       )}
       {...props}
     >
-      {start ? <div className="flex items-center gap-2">{start}</div> : null}
-      {children ? (
-        <div className="flex flex-1 items-center">{children}</div>
+      {center ? (
+        <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-4">
+          <div
+            data-slot="top-nav-start"
+            className="flex min-w-0 items-center justify-self-start gap-2"
+          >
+            {start}
+          </div>
+          <div data-slot="top-nav-center" className="flex items-center justify-self-center">
+            {center}
+          </div>
+          <div data-slot="top-nav-end" className="flex min-w-0 items-center justify-self-end gap-2">
+            {end}
+          </div>
+        </div>
       ) : (
-        <div className="flex-1" />
+        <>
+          {start ? <div className="flex items-center gap-2">{start}</div> : null}
+          {children ? (
+            <div className="flex flex-1 items-center">{children}</div>
+          ) : (
+            <div className="flex-1" />
+          )}
+          {end ? <div className="flex items-center gap-2">{end}</div> : null}
+        </>
       )}
-      {end ? <div className="flex items-center gap-2">{end}</div> : null}
     </header>
   );
 });

package/src/components/transfer/transfer.tsx

@@ -18,6 +18,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "../card";
 import { Checkbox } from "../checkbox";
 import { Input } from "../input";
 import { ScrollArea } from "../scroll-area";
+import { useLocale } from "../locale-provider";
 
 // ─── Public types ─────────────────────────────────────────────────────────────
 
@@ -87,6 +88,7 @@ function TransferPanel({
   titleId,
   rowIdBase,
 }: PanelProps) {
+  const { t } = useLocale();
   // When a search is active, filter visible items; move operations affect VISIBLE enabled items.
   const visibleItems = useMemo(() => {
     if (!searchQuery) return items;
@@ -109,10 +111,12 @@ function TransferPanel({
           <Checkbox
             checked={someChecked ? "indeterminate" : allChecked}
             onCheckedChange={(v) => onCheckAll(v === true)}
-            aria-label={`Select all in ${typeof title === "string" ? title : "panel"}`}
+            aria-label={t("ui.transfer.selectAllIn", {
+              title: typeof title === "string" ? title : t("ui.transfer.panelFallback"),
+            })}
             disabled={enabledVisible.length === 0}
           />
-          <CardTitle id={titleId} className="text-sm">
+          <CardTitle id={titleId} className="text-body">
             {title}
           </CardTitle>
         </div>
@@ -124,15 +128,17 @@ function TransferPanel({
       {showSearch && (
         <div className="px-3 pb-2">
           <label htmlFor={searchInputId} className="sr-only">
-            Search {typeof title === "string" ? title : "items"}
+            {t("ui.transfer.searchIn", {
+              title: typeof title === "string" ? title : t("ui.transfer.itemsFallback"),
+            })}
           </label>
           <Input
             id={searchInputId}
             type="search"
-            placeholder="Search…"
+            placeholder={t("ui.transfer.searchPlaceholder")}
             value={searchQuery}
             onChange={(e) => onSearchChange(e.target.value)}
-            className="h-7 text-xs"
+            className="h-7 text-meta"
           />
         </div>
       )}
@@ -140,8 +146,8 @@ function TransferPanel({
       <CardContent className="flex-1 overflow-hidden p-0">
         <ScrollArea className="h-full min-h-[200px]">
           {visibleItems.length === 0 ? (
-            <p className="flex h-[200px] items-center justify-center text-sm text-muted-foreground">
-              No items
+            <p className="flex h-[200px] items-center justify-center text-body text-muted-foreground">
+              {t("ui.transfer.empty")}
             </p>
           ) : (
             <ul role="list" className="flex flex-col py-1">
@@ -156,7 +162,7 @@ function TransferPanel({
                   <li
                     key={item.value}
                     className={cn(
-                      "flex select-none items-center gap-2 px-3 py-1.5 text-sm",
+                      "flex select-none items-center gap-2 px-3 py-1.5 text-body",
                       "hover:bg-accent hover:text-accent-foreground",
                       item.disabled && "opacity-50 hover:bg-transparent hover:text-foreground",
                     )}
@@ -198,13 +204,18 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
     defaultTargetKeys,
     onChange,
     showSearch = false,
-    titles = ["Source", "Target"],
+    titles,
     renderItem = (item) => item.label,
     className,
     ...props
   },
   ref,
 ) {
+  const { t } = useLocale();
+  const resolvedTitles: [ReactNode, ReactNode] = titles ?? [
+    t("ui.transfer.defaultSourceTitle"),
+    t("ui.transfer.defaultTargetTitle"),
+  ];
   const isControlled = controlledTargetKeys !== undefined;
 
   // Uncontrolled internal state
@@ -273,13 +284,13 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
     );
     if (toMove.size === 0) return;
     applyMove([...targetKeys, ...toMove]);
-    setAnnouncement(`${toMove.size} item${toMove.size === 1 ? "" : "s"} moved to the target list.`);
+    setAnnouncement(t("ui.transfer.movedToTarget", { count: toMove.size }));
     setSourceChecked((prev) => {
       const next = new Set(prev);
       toMove.forEach((v) => next.delete(v));
       return next;
     });
-  }, [sourceChecked, dataSource, targetKeys, targetSet, applyMove]);
+  }, [sourceChecked, dataSource, targetKeys, targetSet, applyMove, t]);
 
   /** Move ALL visible enabled source items → target */
   const handleMoveAllRight = useCallback(() => {
@@ -290,11 +301,9 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
     if (toAdd.length === 0) return;
     const next = [...new Set([...targetKeys, ...toAdd])];
     applyMove(next);
-    setAnnouncement(
-      `${toAdd.length} item${toAdd.length === 1 ? "" : "s"} moved to the target list.`,
-    );
+    setAnnouncement(t("ui.transfer.movedToTarget", { count: toAdd.length }));
     setSourceChecked(new Set());
-  }, [visibleSourceEnabled, targetKeys, applyMove]);
+  }, [visibleSourceEnabled, targetKeys, applyMove, t]);
 
   /** Move target-panel checked items → source */
   const handleMoveCheckedLeft = useCallback(() => {
@@ -306,26 +315,22 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
     );
     if (toRemove.size === 0) return;
     applyMove(targetKeys.filter((k) => !toRemove.has(k)));
-    setAnnouncement(
-      `${toRemove.size} item${toRemove.size === 1 ? "" : "s"} moved to the source list.`,
-    );
+    setAnnouncement(t("ui.transfer.movedToSource", { count: toRemove.size }));
     setTargetChecked((prev) => {
       const next = new Set(prev);
       toRemove.forEach((v) => next.delete(v));
       return next;
     });
-  }, [targetChecked, dataSource, targetKeys, targetSet, applyMove]);
+  }, [targetChecked, dataSource, targetKeys, targetSet, applyMove, t]);
 
   /** Move ALL visible enabled target items → source */
   const handleMoveAllLeft = useCallback(() => {
     const toRemove = new Set(visibleTargetEnabled.map((it) => it.value));
     if (toRemove.size === 0) return;
     applyMove(targetKeys.filter((k) => !toRemove.has(k)));
-    setAnnouncement(
-      `${toRemove.size} item${toRemove.size === 1 ? "" : "s"} moved to the source list.`,
-    );
+    setAnnouncement(t("ui.transfer.movedToSource", { count: toRemove.size }));
     setTargetChecked(new Set());
-  }, [visibleTargetEnabled, targetKeys, applyMove]);
+  }, [visibleTargetEnabled, targetKeys, applyMove, t]);
 
   // ── Per-panel check handlers ──────────────────────────────────────────────
 
@@ -402,7 +407,7 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
 
       {/* ── Source panel ─────────────────────────────── */}
       <TransferPanel
-        title={titles[0]}
+        title={resolvedTitles[0]}
         items={sourceItems}
         checked={sourceChecked}
         onCheckItem={handleSourceCheckItem}
@@ -420,12 +425,12 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
       <div
         className="flex flex-col items-center justify-center gap-1"
         role="group"
-        aria-label="Move controls"
+        aria-label={t("ui.transfer.moveControls")}
       >
         <Button
           variant="outline"
           size="icon-sm"
-          aria-label="Move selected right"
+          aria-label={t("ui.transfer.moveSelectedRight")}
           disabled={!canMoveCheckedRight}
           onClick={handleMoveCheckedRight}
         >
@@ -434,7 +439,7 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
         <Button
           variant="outline"
           size="icon-sm"
-          aria-label="Move all right"
+          aria-label={t("ui.transfer.moveAllRight")}
           disabled={!canMoveAllRight}
           onClick={handleMoveAllRight}
         >
@@ -443,7 +448,7 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
         <Button
           variant="outline"
           size="icon-sm"
-          aria-label="Move selected left"
+          aria-label={t("ui.transfer.moveSelectedLeft")}
           disabled={!canMoveCheckedLeft}
           onClick={handleMoveCheckedLeft}
           className="mt-2"
@@ -453,7 +458,7 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
         <Button
           variant="outline"
           size="icon-sm"
-          aria-label="Move all left"
+          aria-label={t("ui.transfer.moveAllLeft")}
           disabled={!canMoveAllLeft}
           onClick={handleMoveAllLeft}
         >
@@ -463,7 +468,7 @@ export const Transfer = forwardRef<HTMLDivElement, TransferProps>(function Trans
 
       {/* ── Target panel ─────────────────────────────── */}
       <TransferPanel
-        title={titles[1]}
+        title={resolvedTitles[1]}
         items={targetItems}
         checked={targetChecked}
         onCheckItem={handleTargetCheckItem}

package/src/components/tree/tree.stories.tsx

@@ -530,7 +530,7 @@ export const RevealSelectedNode: Story = {
 /**
  * `surface="sidebar"` renders the selected row with the sidebar's own active-item
  * treatment (`bg-sidebar-accent` + `text-sidebar-accent-foreground` + `font-medium`),
- * matching `SidebarMenuButton`'s active state — because the default `bg-accent`
+ * matching `SidebarMenuButton`'s active state — because the default `bg-selection`
  * fill is near-invisible against `--sidebar`. No fill is ≥3:1 on a sidebar, so
  * (like the Sidebar itself) perceivability comes from the foreground/weight shift
  * plus `aria-selected`, not fill contrast alone.

package/src/components/tree/tree.test.tsx

@@ -141,6 +141,29 @@ describe("Tree reveal-into-view (scrollToId / scrollSelectionIntoView)", () => {
     }
   });
 
+  it("does not re-scroll on an unrelated re-render with a same-content controlled selectedIds array", async () => {
+    const scrollSpy = vi.fn();
+    const orig = Element.prototype.scrollIntoView;
+    Element.prototype.scrollIntoView = scrollSpy;
+    try {
+      const { rerender } = render(<Tree nodes={nodes} scrollSelectionIntoView selectedIds={[]} />);
+      rerender(<Tree nodes={nodes} scrollSelectionIntoView selectedIds={["carrot"]} />);
+      await waitFor(() => expect(screen.getByText("Carrot")).toBeInTheDocument());
+      const callsAfterInitialReveal = scrollSpy.mock.calls.length;
+      expect(callsAfterInitialReveal).toBeGreaterThan(0);
+
+      // Same ids, but a FRESH array reference — a common pattern (parent
+      // recomputes `selectedIds` inline every render). Previously the
+      // controlled Set was rebuilt with a new identity every render, so the
+      // reveal effect saw a "changed" selection and re-scrolled on every
+      // unrelated re-render (scroll-jump-while-scrolling, #reviewed 1.6).
+      rerender(<Tree nodes={nodes} scrollSelectionIntoView selectedIds={["carrot"]} />);
+      expect(scrollSpy.mock.calls.length).toBe(callsAfterInitialReveal);
+    } finally {
+      Element.prototype.scrollIntoView = orig;
+    }
+  });
+
   it("scrollToId requests ancestor expansion in virtualize mode (controlled)", async () => {
     const onExpandedChange = vi.fn();
     const { rerender } = render(
@@ -395,6 +418,24 @@ describe("Tree (lazy loading)", () => {
     expect(screen.getByRole("treeitem", { name: /Category A/ })).not.toHaveAttribute("aria-busy");
   });
 
+  it("does not drop lazily-loaded children when the parent re-renders with a fresh (same-content) nodes prop", async () => {
+    const user = userEvent.setup();
+    const loadChildren = vi.fn().mockResolvedValue([{ id: "child-1", label: "Child 1" }]);
+
+    const { rerender } = render(<Tree nodes={makeLazyNodes()} loadChildren={loadChildren} />);
+    await user.click(screen.getByRole("treeitem", { name: /Category A/ }));
+    await waitFor(() => {
+      expect(screen.getByRole("treeitem", { name: /Child 1/ })).toBeInTheDocument();
+    });
+
+    // Parent re-renders with a brand-new `nodes` array literal carrying the
+    // SAME data (no `children` on root-a — the caller doesn't know about the
+    // lazy-loaded subtree). This must not wipe out what we already fetched.
+    rerender(<Tree nodes={makeLazyNodes()} loadChildren={loadChildren} />);
+
+    expect(screen.getByRole("treeitem", { name: /Child 1/ })).toBeInTheDocument();
+  });
+
   it("retries successfully after error", async () => {
     const user = userEvent.setup();
     const loadChildren = vi
@@ -425,24 +466,24 @@ describe("Tree (surface prop)", () => {
     { id: "b", label: "Beta" },
   ];
 
-  it("default surface uses bg-accent on the selected row", async () => {
+  it("default surface uses bg-selection on the selected row", async () => {
     const user = userEvent.setup();
     render(<Tree nodes={simpleNodes} />);
     await user.click(screen.getByRole("treeitem", { name: /Alpha/ }));
     const selected = screen.getByRole("treeitem", { name: /Alpha/ });
     expect(selected).toHaveAttribute("aria-selected", "true");
     // classList gives exact token membership — avoids false matches from hover:bg-accent
-    expect(selected.classList.contains("bg-accent")).toBe(true);
+    expect(selected.classList.contains("bg-selection")).toBe(true);
     expect(selected.classList.contains("bg-sidebar-accent")).toBe(false);
   });
 
-  it("surface='default' (explicit) uses bg-accent on the selected row", async () => {
+  it("surface='default' (explicit) uses bg-selection on the selected row", async () => {
     const user = userEvent.setup();
     render(<Tree nodes={simpleNodes} surface="default" />);
     await user.click(screen.getByRole("treeitem", { name: /Alpha/ }));
     const selected = screen.getByRole("treeitem", { name: /Alpha/ });
     expect(selected).toHaveAttribute("aria-selected", "true");
-    expect(selected.classList.contains("bg-accent")).toBe(true);
+    expect(selected.classList.contains("bg-selection")).toBe(true);
     expect(selected.classList.contains("bg-sidebar-accent")).toBe(false);
   });
 

package/src/components/tree/tree.tsx

@@ -6,6 +6,7 @@ import {
   useCallback,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
   type HTMLAttributes,
@@ -72,8 +73,8 @@ export interface TreeProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivEleme
   checkboxes?: boolean;
   /**
    * The surface on which the tree is rendered.
-   * - `"default"` (default) — renders selected rows with `bg-accent` (for use on
-   *   background/card surfaces).
+   * - `"default"` (default) — renders selected rows with `bg-selection` (for use
+   *   on background/card surfaces).
    * - `"sidebar"` — renders selected rows with the sidebar's own active-item
    *   treatment (`bg-sidebar-accent` + `text-sidebar-accent-foreground` +
    *   `font-medium`), so selection reads consistently with `SidebarMenuButton`'s
@@ -149,7 +150,24 @@ function useControllableSet(
     () => new Set(controlled ?? defaultValue ?? []),
   );
 
-  const value: Set<string> = isControlled ? new Set(controlled) : internal;
+  // Stable controlled Set: build a new Set only when the controlled array's
+  // CONTENT actually changed, not merely its reference (many callers pass a
+  // freshly-computed array with the same ids on every render). Without this,
+  // `selectedIds`/`expandedIds` changed identity on every render, which made
+  // effects keyed on them (the scrollToId/scrollSelectionIntoView reveal
+  // effect) fire on every re-render instead of on a real selection change —
+  // the scroll-jump-while-scrolling bug.
+  const controlledSetRef = useRef<Set<string> | null>(null);
+  let value: Set<string>;
+  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: Set<string>) => {
@@ -162,6 +180,30 @@ function useControllableSet(
   return [value, setValue];
 }
 
+/**
+ * Reconcile an incoming `nodes` prop against the previous internal tree,
+ * preserving any children merged in locally via `loadChildren` that the new
+ * prop doesn't (yet) carry. Without this, any parent re-render that hands
+ * down a new (even structurally-identical) `nodes` array wipes out every
+ * lazily-loaded subtree that isn't also present upstream.
+ */
+function reconcileNodes<T>(propNodes: TreeNode<T>[], prevNodes: TreeNode<T>[]): TreeNode<T>[] {
+  const prevById = new Map(prevNodes.map((n) => [n.id, n] as const));
+  return propNodes.map((n) => {
+    const prev = prevById.get(n.id);
+    if (!prev) return n;
+    if (!n.children?.length && prev.children?.length) {
+      // The prop still marks this node as lazily-expandable but doesn't (yet)
+      // carry the children we already fetched — keep what we loaded.
+      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;
+  });
+}
+
 /** Merge resolved children into a tree, returning a new tree. */
 function mergeChildren<T>(
   nodes: TreeNode<T>[],
@@ -269,7 +311,7 @@ function VirtualFlatRow<T>({
           selectionMode !== "none" &&
           (surface === "sidebar"
             ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
-            : "bg-accent text-accent-foreground font-medium"),
+            : "bg-selection text-selection-foreground font-medium"),
         node.disabled && "cursor-not-allowed opacity-50 pointer-events-none",
       )}
       style={indentStyle}
@@ -328,7 +370,7 @@ function VirtualFlatRow<T>({
           <span className="truncate">{t("ui.tree.failedToLoad")}</span>
           <button
             type="button"
-            aria-label="Retry loading children"
+            aria-label={t("ui.tree.retryLoadingChildren")}
             onClick={(e) => {
               e.stopPropagation();
               onRetry(node.id);
@@ -340,7 +382,7 @@ function VirtualFlatRow<T>({
             )}
           >
             <RotateCcw className="size-3" aria-hidden="true" />
-            Retry
+            {t("ui.tree.retry")}
           </button>
         </span>
       ) : (
@@ -379,11 +421,12 @@ function VirtualFlatRow<T>({
 // ---------------------------------------------------------------------------
 
 function LoadingRow({ level }: { level: number }) {
+  const { t } = useLocale();
   const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };
   return (
     <div
       role="treeitem"
-      aria-label="Loading…"
+      aria-label={t("loading")}
       aria-disabled="true"
       tabIndex={-1}
       className="flex min-w-0 items-center gap-1.5 px-2 py-1.5"
@@ -417,13 +460,13 @@ function ErrorRow({ level, onRetry }: { level: number; onRetry: () => void }) {
           onRetry();
         }}
         className={cn(
-          "ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-xs",
+          "ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-meta",
           "text-muted-foreground hover:text-foreground",
           "focus-ring",
         )}
       >
         <RotateCcw className="size-3" aria-hidden="true" />
-        Retry
+        {t("ui.tree.retry")}
       </button>
     </div>
   );
@@ -551,7 +594,7 @@ function TreeItem<T>({
             selectionMode !== "none" &&
             (surface === "sidebar"
               ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
-              : "bg-accent text-accent-foreground font-medium"),
+              : "bg-selection text-selection-foreground font-medium"),
           node.disabled && "cursor-not-allowed opacity-50 pointer-events-none",
         )}
         style={indentStyle}
@@ -771,9 +814,10 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
   // Internal mutable tree (supports lazy-loaded children merge)
   const [nodes, setNodes] = useState<TreeNode[]>(() => nodesProp as TreeNode[]);
 
-  // Keep internal tree in sync with nodesProp if it changes externally
+  // Keep internal tree in sync with nodesProp if it changes externally,
+  // preserving any children merged in locally via lazy `loadChildren`.
   useEffect(() => {
-    setNodes(nodesProp as TreeNode[]);
+    setNodes((prev) => reconcileNodes(nodesProp as TreeNode[], prev));
   }, [nodesProp]);
 
   const [expandedIds, setExpandedIds] = useControllableSet(
@@ -825,8 +869,18 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
   // Flattened visible rows (for virtualized path and keyboard hook)
   // ---------------------------------------------------------------------------
 
-  const flatRows = flattenVisibleWithMeta(nodes, expandedIds, lazyState);
-  const flatNodeIds = flatRows.map((r) => r.node.id);
+  const flatRows = useMemo(
+    () => flattenVisibleWithMeta(nodes, expandedIds, lazyState),
+    [nodes, expandedIds, lazyState],
+  );
+  const flatNodeIds = useMemo(() => flatRows.map((r) => r.node.id), [flatRows]);
+  // O(1) row lookup by id — `handleToggleExpand`/`handleSelectVirtual` run on
+  // every click/keypress and previously did an O(n) `Array.find` each time.
+  const flatRowIndexById = useMemo(() => {
+    const map = new Map<string, number>();
+    flatRows.forEach((r, i) => map.set(r.node.id, i));
+    return map;
+  }, [flatRows]);
 
   // ---------------------------------------------------------------------------
   // Keyboard hook
@@ -862,9 +916,10 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
 
   const handleToggleExpand = useCallback(
     (nodeId: string) => {
-      const flatRow = flatRows.find((r) => r.node.id === nodeId);
-      if (!flatRow) return;
-      const node = flatRow.node;
+      const index = flatRowIndexById.get(nodeId);
+      if (index === undefined) return;
+      const node = flatRows[index]?.node;
+      if (!node) return;
       const hasLoadedChildren = !!node.children?.length;
       const next = new Set(expandedIds);
       if (expandedIds.has(nodeId)) {
@@ -877,15 +932,15 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
       }
       setExpandedIds(next);
     },
-    [expandedIds, flatRows, setExpandedIds, loadChildren, handleExpandLazy],
+    [expandedIds, flatRows, flatRowIndexById, setExpandedIds, loadChildren, handleExpandLazy],
   );
 
   const handleSelectVirtual = useCallback(
     (nodeId: string) => {
-      const flatRow = flatRows.find((r) => r.node.id === nodeId);
-      if (!flatRow) return;
-      const node = flatRow.node;
-      if (node.disabled || selectionMode === "none") return;
+      const index = flatRowIndexById.get(nodeId);
+      if (index === undefined) return;
+      const node = flatRows[index]?.node;
+      if (!node || node.disabled || selectionMode === "none") return;
       if (selectionMode === "single") {
         setSelectedIds(new Set([nodeId]));
       } else {
@@ -898,7 +953,7 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
         setSelectedIds(next);
       }
     },
-    [flatRows, selectionMode, selectedIds, setSelectedIds],
+    [flatRows, flatRowIndexById, selectionMode, selectedIds, setSelectedIds],
   );
 
   // ---------------------------------------------------------------------------
@@ -960,8 +1015,8 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
   // node (registered via registerAndFlush in both paths).
   const scrollNodeIntoView = useCallback(
     (id: string): boolean => {
-      const index = flatNodeIds.indexOf(id);
-      if (index < 0) return false;
+      const index = flatRowIndexById.get(id);
+      if (index === undefined) return false;
       if (virtualize) {
         virtualizerRef.current?.scrollToIndex(index, { align: "center" });
       } else {
@@ -970,7 +1025,7 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
       }
       return true;
     },
-    [flatNodeIds, virtualize],
+    [flatRowIndexById, virtualize],
   );
 
   // Reveal `id`: scroll it now if visible, else expand its (loaded) ancestors and