@elabs-ai/components-ui 4.0.0 → 4.2.0

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

@@ -483,7 +483,7 @@ function RevealSelectedNodeDemo() {
             key={id}
             type="button"
             onClick={() => setTarget(id)}
-            className="rounded-md border border-border-strong bg-background px-3 py-1.5 text-body font-medium text-foreground hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="rounded-md border border-border-strong bg-background px-3 py-1.5 text-body font-medium text-foreground hover:bg-surface-muted focus-ring"
           >
             Navigate to Node {Number(id.split("-")[1]) + 1}
           </button>
@@ -535,7 +535,7 @@ export const RevealSelectedNode: Story = {
  * (like the Sidebar itself) perceivability comes from the foreground/weight shift
  * plus `aria-selected`, not fill contrast alone.
  *
- * NOTE: cross-theme visual correctness (the three shipped themes — light,
+ * NOTE: cross-theme visual correctness (every shipped theme — light,
  * dark) requires a real render and is owed to a human reviewer;
  * the tokens are semantic so they adapt, but pixel-level confirmation cannot be
  * automated in this environment.

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

package/src/components/tree/tree.tsx

@@ -6,6 +6,7 @@ import {
   useCallback,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
   type HTMLAttributes,
@@ -15,6 +16,7 @@ import { ChevronRight, AlertCircle, RotateCcw } from "lucide-react";
 import { useVirtualizer, type Virtualizer } from "@tanstack/react-virtual";
 import { cn } from "../../lib/cn";
 import { Checkbox } from "../checkbox/checkbox";
+import { useLocale } from "../locale-provider";
 import { Skeleton } from "../skeleton/skeleton";
 import { Spinner } from "../spinner/spinner";
 import { useTreeKeyboard } from "./use-tree-keyboard";
@@ -148,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>) => {
@@ -161,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>[],
@@ -222,6 +265,7 @@ function VirtualFlatRow<T>({
   registerNodeRef,
   setActiveId,
 }: VirtualFlatRowProps<T>) {
+  const { t } = useLocale();
   const { node, level, setSize, posInSet } = row;
   const isLoading = lazyState === "loading";
   const isError = lazyState === "error";
@@ -262,7 +306,7 @@ function VirtualFlatRow<T>({
         "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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
         isSelected &&
           selectionMode !== "none" &&
           (surface === "sidebar"
@@ -319,12 +363,14 @@ function VirtualFlatRow<T>({
 
       {/* label */}
       {isError ? (
-        <span id={labelId} className="min-w-0 flex items-center gap-1 text-destructive">
+        // #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).
+        <span id={labelId} className="min-w-0 flex items-center gap-1 text-destructive-text">
           <AlertCircle className="size-3.5 shrink-0" aria-hidden="true" />
-          <span className="truncate">Failed to load</span>
+          <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);
@@ -332,11 +378,11 @@ function VirtualFlatRow<T>({
             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-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "focus-ring",
             )}
           >
             <RotateCcw className="size-3" aria-hidden="true" />
-            Retry
+            {t("ui.tree.retry")}
           </button>
         </span>
       ) : (
@@ -375,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"
@@ -392,19 +439,20 @@ function LoadingRow({ level }: { level: number }) {
 }
 
 function ErrorRow({ level, onRetry }: { level: number; onRetry: () => void }) {
+  const { t } = useLocale();
   const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };
   return (
     <div
       role="treeitem"
-      aria-label="Failed to load"
+      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"
+      className="flex min-w-0 items-center gap-1.5 px-2 py-1.5 text-body text-destructive-text"
       style={indentStyle}
     >
       <span aria-hidden="true" className="size-4 shrink-0" />
       <AlertCircle className="size-3.5 shrink-0" aria-hidden="true" />
-      <span className="truncate">Failed to load</span>
+      <span className="truncate">{t("ui.tree.failedToLoad")}</span>
       <button
         type="button"
         onClick={(e) => {
@@ -412,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-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "focus-ring",
         )}
       >
         <RotateCcw className="size-3" aria-hidden="true" />
-        Retry
+        {t("ui.tree.retry")}
       </button>
     </div>
   );
@@ -541,7 +589,7 @@ function TreeItem<T>({
           "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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
           isSelected &&
             selectionMode !== "none" &&
             (surface === "sidebar"
@@ -766,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(
@@ -820,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
@@ -857,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)) {
@@ -872,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 {
@@ -893,7 +953,7 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
         setSelectedIds(next);
       }
     },
-    [flatRows, selectionMode, selectedIds, setSelectedIds],
+    [flatRows, flatRowIndexById, selectionMode, selectedIds, setSelectedIds],
   );
 
   // ---------------------------------------------------------------------------
@@ -955,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 {
@@ -965,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

package/src/components/tree/use-tree-keyboard.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { TreeNode } from "./tree";
 
 /**
@@ -125,6 +125,31 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
     }
   }, []);
 
+  // Memoised O(1) lookups — rebuilt only when the tree shape / expansion
+  // actually changes, not on every keypress (a full re-flatten + `indexOf`/
+  // `findNode` walk per arrow key is O(n) on a large tree).
+  const visible = useMemo(
+    () => (virtualize && flatNodeIds ? flatNodeIds : flattenVisible(nodes, expandedIds)),
+    [virtualize, flatNodeIds, nodes, expandedIds],
+  );
+  const visibleIndexById = useMemo(() => {
+    const map = new Map<string, number>();
+    visible.forEach((id, i) => map.set(id, i));
+    return map;
+  }, [visible]);
+  const nodeById = useMemo(() => {
+    const map = new Map<string, TreeNode<T>>();
+    function walk(list: TreeNode<T>[]) {
+      for (const node of list) {
+        map.set(node.id, node);
+        if (node.children?.length) walk(node.children);
+      }
+    }
+    walk(nodes);
+    return map;
+  }, [nodes]);
+  const parentMapMemo = useMemo(() => buildParentMap(nodes), [nodes]);
+
   // Typeahead buffer
   const typeaheadBuffer = useRef<string>("");
   const typeaheadTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -156,8 +181,7 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
 
       // Element not mounted — happens when it's scrolled out of the virtual window.
       if (virtualize && scrollToVirtualIndex && pendingFocusIdRef) {
-        const ids = flatNodeIds ?? [];
-        const index = ids.indexOf(id);
+        const index = visibleIndexById.get(id) ?? -1;
         if (index >= 0) {
           pendingFocusIdRef.current = id;
           scrollToVirtualIndex(index);
@@ -165,18 +189,16 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
         }
       }
     },
-    [virtualize, flatNodeIds, pendingFocusIdRef, scrollToVirtualIndex],
+    [virtualize, visibleIndexById, pendingFocusIdRef, scrollToVirtualIndex],
   );
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLElement>) => {
       if (!activeId) return;
 
-      // In virtual mode use the pre-computed flat list so we don't re-flatten
-      const visible = virtualize && flatNodeIds ? flatNodeIds : flattenVisible(nodes, expandedIds);
-      const currentIndex = visible.indexOf(activeId);
-      const currentNode = findNode(nodes, activeId);
-      const parentMap = buildParentMap(nodes);
+      const currentIndex = visibleIndexById.get(activeId) ?? -1;
+      const currentNode = nodeById.get(activeId);
+      const parentMap = parentMapMemo;
 
       const moveTo = (id: string) => {
         e.preventDefault();
@@ -185,7 +207,7 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
 
       const selectNode = (id: string) => {
         if (selectionMode === "none") return;
-        const node = findNode(nodes, id);
+        const node = nodeById.get(id);
         if (node?.disabled) return;
         if (selectionMode === "single") {
           onSelectionChange(new Set([id]));
@@ -282,7 +304,7 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
               ...visible.slice(0, currentIndex + 1),
             ];
             for (const id of searchList) {
-              const node = findNode(nodes, id);
+              const node = nodeById.get(id);
               if (!node) continue;
               // only string labels are searchable
               if (typeof node.label !== "string") continue;
@@ -298,15 +320,16 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
     },
     [
       activeId,
-      nodes,
+      visible,
+      visibleIndexById,
+      nodeById,
+      parentMapMemo,
       expandedIds,
       onExpandedChange,
       selectionMode,
       selectedIds,
       onSelectionChange,
       setActiveId,
-      virtualize,
-      flatNodeIds,
     ],
   );