@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/navigation/tree-view/index.cjs

@@ -0,0 +1,455 @@
+"use client";
+const require_index = require("../link/index.cjs");
+;/* empty css                */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/navigation/tree-view/index.tsx
+const normalizeIds = (ids) => Array.from(new Set((ids ?? []).filter((id) => typeof id === "string" && id.length > 0)));
+const getTextValue = (item) => {
+	if (item.textValue !== void 0) return item.textValue;
+	if (typeof item.label === "string" || typeof item.label === "number") return String(item.label);
+	return "";
+};
+const normalizeSearchText = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLocaleLowerCase();
+const TreeView = ({ items, selectionMode = "single", defaultExpandedIds = [], expandedIds, onExpandedChange, defaultSelectedIds = [], selectedIds, onSelectionChange, defaultFocusedId, onFocusedChange, loadChildren, onLoadChildrenError, onItemActivate, getItemActive, renderItem, renderIcon, renderLabel, expandOnItemClick = false, typeahead = true, size = "md", indentation, loadingLabel = "Loading…", loadErrorLabel = "Could not load children. Collapse and expand to retry.", itemClassName, className, style, dir, ...rootProps }) => {
+	const generatedId = (0, react.useId)();
+	const isExpandedControlled = expandedIds !== void 0;
+	const isSelectionControlled = selectedIds !== void 0;
+	const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, react.useState)(() => normalizeIds(defaultExpandedIds));
+	const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = (0, react.useState)(() => normalizeIds(defaultSelectedIds));
+	const [focusedId, setFocusedId] = (0, react.useState)(() => defaultFocusedId ?? (selectionMode === "none" ? void 0 : normalizeIds(selectedIds ?? defaultSelectedIds)[0]) ?? items[0]?.id);
+	const [loadedChildren, setLoadedChildren] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const [loadingIds, setLoadingIds] = (0, react.useState)([]);
+	const [loadErrors, setLoadErrors] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const itemRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const inFlightLoads = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const previousExpandedIds = (0, react.useRef)(null);
+	const pendingFocusId = (0, react.useRef)(null);
+	const focusWithinTree = (0, react.useRef)(false);
+	const typeaheadState = (0, react.useRef)({
+		value: "",
+		time: 0
+	});
+	const currentExpandedIds = isExpandedControlled ? expandedIds ?? [] : uncontrolledExpandedIds;
+	const requestedSelectedIds = isSelectionControlled ? selectedIds ?? [] : uncontrolledSelectedIds;
+	const currentSelectedIds = selectionMode === "single" ? requestedSelectedIds.slice(0, 1) : requestedSelectedIds;
+	const expandedSet = (0, react.useMemo)(() => new Set(normalizeIds(currentExpandedIds)), [currentExpandedIds]);
+	const selectedSet = (0, react.useMemo)(() => new Set(normalizeIds(currentSelectedIds)), [currentSelectedIds]);
+	const loadingSet = (0, react.useMemo)(() => new Set(loadingIds), [loadingIds]);
+	const getChildren = (0, react.useCallback)((item) => item.children ?? loadedChildren.get(item.id) ?? [], [loadedChildren]);
+	const hasChildren = (0, react.useCallback)((item) => {
+		if (item.children !== void 0 || loadedChildren.has(item.id)) return getChildren(item).length > 0;
+		return Boolean(item.hasChildren);
+	}, [getChildren, loadedChildren]);
+	const visibleItems = (0, react.useMemo)(() => {
+		const result = [];
+		const visit = (nodes) => {
+			nodes.forEach((item) => {
+				result.push(item);
+				const children = getChildren(item);
+				if (expandedSet.has(item.id) && hasChildren(item) && children.length > 0) visit(children);
+			});
+		};
+		visit(items);
+		return result;
+	}, [
+		items,
+		expandedSet,
+		getChildren,
+		hasChildren
+	]);
+	const parentIds = (0, react.useMemo)(() => {
+		const result = /* @__PURE__ */ new Map();
+		const visit = (nodes, parentId) => {
+			nodes.forEach((item) => {
+				if (parentId !== void 0) result.set(item.id, parentId);
+				visit(getChildren(item), item.id);
+			});
+		};
+		visit(items);
+		return result;
+	}, [items, getChildren]);
+	const visibleIds = (0, react.useMemo)(() => new Set(visibleItems.map((item) => item.id)), [visibleItems]);
+	let effectiveFocusedId = focusedId;
+	if (!effectiveFocusedId || !visibleIds.has(effectiveFocusedId)) {
+		let ancestor = effectiveFocusedId;
+		while (ancestor && !visibleIds.has(ancestor)) ancestor = parentIds.get(ancestor);
+		effectiveFocusedId = ancestor ?? visibleItems[0]?.id;
+	}
+	(0, react.useEffect)(() => {
+		if (pendingFocusId.current && visibleIds.has(pendingFocusId.current)) {
+			itemRefs.current.get(pendingFocusId.current)?.focus();
+			pendingFocusId.current = null;
+		}
+	}, [visibleItems, visibleIds]);
+	(0, react.useEffect)(() => {
+		if (focusedId !== effectiveFocusedId && effectiveFocusedId) {
+			setFocusedId(effectiveFocusedId);
+			onFocusedChange?.(effectiveFocusedId);
+			if (focusWithinTree.current) itemRefs.current.get(effectiveFocusedId)?.focus();
+		}
+	}, [
+		effectiveFocusedId,
+		focusedId,
+		onFocusedChange
+	]);
+	const commitExpandedIds = (nextIds) => {
+		const next = normalizeIds(nextIds);
+		if (!isExpandedControlled) setUncontrolledExpandedIds(next);
+		onExpandedChange?.(next);
+	};
+	const commitSelectedIds = (nextIds) => {
+		const next = normalizeIds(nextIds);
+		if (!isSelectionControlled) setUncontrolledSelectedIds(next);
+		onSelectionChange?.(next);
+	};
+	const loadNodeChildren = (0, react.useCallback)(async (item) => {
+		if (!loadChildren || !item.hasChildren || item.children !== void 0) return;
+		if (loadedChildren.has(item.id) || inFlightLoads.current.has(item.id)) return;
+		inFlightLoads.current.add(item.id);
+		setLoadingIds((current) => [...current, item.id]);
+		setLoadErrors((current) => {
+			const next = new Map(current);
+			next.delete(item.id);
+			return next;
+		});
+		try {
+			const children = await loadChildren(item);
+			setLoadedChildren((current) => {
+				const next = new Map(current);
+				next.set(item.id, children);
+				return next;
+			});
+		} catch (error) {
+			setLoadErrors((current) => {
+				const next = new Map(current);
+				next.set(item.id, error);
+				return next;
+			});
+			onLoadChildrenError?.(item, error);
+		} finally {
+			inFlightLoads.current.delete(item.id);
+			setLoadingIds((current) => current.filter((id) => id !== item.id));
+		}
+	}, [
+		loadChildren,
+		loadedChildren,
+		onLoadChildrenError
+	]);
+	(0, react.useEffect)(() => {
+		const previous = new Set(previousExpandedIds.current ?? []);
+		const newlyExpandedIds = currentExpandedIds.filter((id) => !previous.has(id));
+		previousExpandedIds.current = normalizeIds(currentExpandedIds);
+		newlyExpandedIds.forEach((id) => {
+			const item = findItemById(items, id, getChildren);
+			if (item) loadNodeChildren(item);
+		});
+	}, [
+		currentExpandedIds,
+		items,
+		getChildren,
+		loadNodeChildren
+	]);
+	const toggleExpanded = (item) => {
+		if (!hasChildren(item)) return;
+		const next = new Set(currentExpandedIds);
+		if (next.has(item.id)) next.delete(item.id);
+		else {
+			next.add(item.id);
+			loadNodeChildren(item);
+		}
+		commitExpandedIds(Array.from(next));
+	};
+	const selectItem = (item, toggleSingle = false) => {
+		if (selectionMode === "none" || item.disabled || item.selectable === false) return;
+		if (selectionMode === "single") {
+			if (currentSelectedIds.length === 1 && currentSelectedIds[0] === item.id) {
+				if (toggleSingle) commitSelectedIds([]);
+				return;
+			}
+			commitSelectedIds([item.id]);
+			return;
+		}
+		const next = new Set(currentSelectedIds);
+		if (next.has(item.id)) next.delete(item.id);
+		else next.add(item.id);
+		commitSelectedIds(Array.from(next));
+	};
+	const focusItem = (id) => {
+		const element = itemRefs.current.get(id);
+		if (element) element.focus();
+		else {
+			setFocusedId(id);
+			onFocusedChange?.(id);
+			pendingFocusId.current = id;
+		}
+	};
+	const expandSiblings = (itemId) => {
+		const parentId = parentIds.get(itemId);
+		const parentItem = parentId ? findItemById(items, parentId, getChildren) : void 0;
+		const siblings = parentItem ? getChildren(parentItem) : items;
+		const next = new Set(currentExpandedIds);
+		let changed = false;
+		siblings.forEach((sibling) => {
+			if (hasChildren(sibling) && !next.has(sibling.id)) {
+				next.add(sibling.id);
+				changed = true;
+				loadNodeChildren(sibling);
+			}
+		});
+		if (changed) commitExpandedIds(Array.from(next));
+	};
+	const handleKeyDown = (event, item, parentId) => {
+		const eventTarget = event.target;
+		if (eventTarget.closest("[role=\"treeitem\"]") !== event.currentTarget) return;
+		if (eventTarget.closest("button, a, input, select, textarea, [contenteditable='true']")) return;
+		const index = visibleItems.findIndex((visibleItem) => visibleItem.id === item.id);
+		const inheritedDirection = event.currentTarget.closest("[dir]")?.getAttribute("dir");
+		const isRtl = dir === "rtl" || dir === void 0 && inheritedDirection === "rtl";
+		const openKey = isRtl ? "ArrowLeft" : "ArrowRight";
+		const closeKey = isRtl ? "ArrowRight" : "ArrowLeft";
+		let handled = false;
+		switch (event.key) {
+			case "ArrowDown":
+				if (index < visibleItems.length - 1) focusItem(visibleItems[index + 1].id);
+				handled = true;
+				break;
+			case "ArrowUp":
+				if (index > 0) focusItem(visibleItems[index - 1].id);
+				handled = true;
+				break;
+			case "Home":
+				if (visibleItems[0]) focusItem(visibleItems[0].id);
+				handled = true;
+				break;
+			case "End":
+				if (visibleItems.length > 0) focusItem(visibleItems[visibleItems.length - 1].id);
+				handled = true;
+				break;
+			case "Enter":
+				if (item.href) {
+					if (!item.disabled) {
+						event.currentTarget.querySelector("a.puzzle-tree__row")?.click();
+						onItemActivate?.(item);
+					}
+				} else if (hasChildren(item)) {
+					toggleExpanded(item);
+					if (!item.disabled) onItemActivate?.(item);
+				} else {
+					selectItem(item);
+					if (!item.disabled) onItemActivate?.(item);
+				}
+				handled = true;
+				break;
+			case " ":
+			case "Spacebar":
+				selectItem(item, true);
+				handled = true;
+				break;
+			case "*":
+				expandSiblings(item.id);
+				handled = true;
+				break;
+			default: if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+				if (!typeahead) break;
+				const currentTime = event.timeStamp;
+				const previousValue = currentTime - typeaheadState.current.time > 500 ? "" : typeaheadState.current.value;
+				const normalizedPrevious = normalizeSearchText(previousValue);
+				const normalizedKey = normalizeSearchText(event.key);
+				const searchValue = normalizedPrevious.length > 0 && [...normalizedPrevious].every((character) => character === normalizedKey) ? event.key : `${previousValue}${event.key}`;
+				typeaheadState.current = {
+					value: searchValue,
+					time: currentTime
+				};
+				const normalizedSearch = normalizeSearchText(searchValue);
+				const match = [...visibleItems.slice(index + 1), ...visibleItems.slice(0, index + 1)].find((candidate) => normalizeSearchText(getTextValue(candidate)).startsWith(normalizedSearch));
+				if (match) focusItem(match.id);
+				handled = true;
+			}
+		}
+		if (event.key === openKey) {
+			if (hasChildren(item)) {
+				if (!expandedSet.has(item.id)) toggleExpanded(item);
+				else {
+					const firstChild = getChildren(item)[0];
+					if (firstChild) focusItem(firstChild.id);
+				}
+			}
+			handled = true;
+		} else if (event.key === closeKey) {
+			if (hasChildren(item) && expandedSet.has(item.id)) toggleExpanded(item);
+			else if (parentId) focusItem(parentId);
+			handled = true;
+		}
+		if (handled) event.preventDefault();
+	};
+	const handleItemClick = (event, item) => {
+		const target = event.target;
+		if (target.closest("[role=\"treeitem\"]") !== event.currentTarget) return;
+		if (target.closest("button, a, input, select, textarea, [data-tree-stop-selection]")) return;
+		focusItem(item.id);
+		if (hasChildren(item) && (target.closest("[data-tree-toggle]") || expandOnItemClick)) {
+			toggleExpanded(item);
+			return;
+		}
+		selectItem(item);
+	};
+	/**
+	* Handles pointer activation of a linked row.
+	*
+	* The row link is the navigation target, but the tree item remains the
+	* roving-focus element. Clicking the expansion affordance is the exception:
+	* it expands the branch and deliberately does not navigate.
+	*/
+	const handleItemLinkClick = (event, item) => {
+		if (event.target.closest("[data-tree-toggle]")) {
+			event.preventDefault();
+			event.stopPropagation();
+			focusItem(item.id);
+			toggleExpanded(item);
+			return;
+		}
+		if (item.disabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		focusItem(item.id);
+		selectItem(item);
+	};
+	const renderItems = (nodes, depth = 0, parentId) => nodes.map((item, index) => {
+		const itemChildren = getChildren(item);
+		const itemHasChildren = hasChildren(item);
+		const expanded = itemHasChildren && expandedSet.has(item.id);
+		const disabled = Boolean(item.disabled);
+		const active = Boolean(getItemActive?.(item));
+		const selected = selectionMode !== "none" && selectedSet.has(item.id) && item.selectable !== false && !disabled;
+		const loading = loadingSet.has(item.id);
+		const focused = effectiveFocusedId === item.id;
+		const itemState = {
+			expanded,
+			selected,
+			focused,
+			loading,
+			disabled,
+			hasChildren: itemHasChildren
+		};
+		const iconContent = renderIcon ? renderIcon(item, itemState) : item.icon;
+		const itemId = `${generatedId}-item-${encodeURIComponent(item.id)}`;
+		const selectable = selectionMode !== "none" && item.selectable !== false && !disabled;
+		const hasLoadError = loadErrors.has(item.id);
+		const rowContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [itemHasChildren ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-tree__toggle",
+			"data-tree-toggle": "true",
+			"data-expanded": expanded || void 0,
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-tree__toggle-spacer",
+			"aria-hidden": "true"
+		}), renderItem ? renderItem(item, itemState) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			iconContent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-tree__icon",
+				"aria-hidden": "true",
+				children: iconContent
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-tree__label",
+				children: renderLabel ? renderLabel(item, itemState) : item.label
+			}),
+			item.endAdornment != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-tree__adornment",
+				children: item.endAdornment
+			})
+		] })] });
+		const row = item.href !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Link, {
+			href: item.href,
+			className: "puzzle-tree__row",
+			tabIndex: -1,
+			"aria-current": active ? "page" : void 0,
+			"aria-disabled": disabled || void 0,
+			"data-tree-row-link": "true",
+			onClick: (event) => handleItemLinkClick(event, item),
+			children: rowContent
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "puzzle-tree__row",
+			children: rowContent
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+			ref: (element) => {
+				if (element) itemRefs.current.set(item.id, element);
+				else itemRefs.current.delete(item.id);
+			},
+			id: itemId,
+			role: "treeitem",
+			"aria-level": depth + 1,
+			"aria-posinset": index + 1,
+			"aria-setsize": nodes.length,
+			"aria-expanded": itemHasChildren ? expanded : void 0,
+			"aria-selected": selectable ? selected : void 0,
+			"aria-disabled": disabled || void 0,
+			"aria-busy": loading || void 0,
+			tabIndex: focused ? 0 : -1,
+			className: (0, _puzzle_ui_core.cn)("puzzle-tree__item", itemClassName),
+			"data-tree-item-id": item.id,
+			"data-active": active || void 0,
+			"data-selected": selected || void 0,
+			"data-disabled": disabled || void 0,
+			"data-expanded": itemHasChildren ? expanded : void 0,
+			onFocus: (event) => {
+				if (event.target !== event.currentTarget) return;
+				if (focusedId !== item.id) {
+					setFocusedId(item.id);
+					onFocusedChange?.(item.id);
+				}
+			},
+			onClick: (event) => handleItemClick(event, item),
+			onKeyDown: (event) => handleKeyDown(event, item, parentId),
+			children: [row, itemHasChildren && expanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+				className: "puzzle-tree__group",
+				role: "group",
+				children: [loading || hasLoadError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					role: "none",
+					className: (0, _puzzle_ui_core.cn)("puzzle-tree__status-row", hasLoadError && !loading && "puzzle-tree__status-row--error"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						role: "status",
+						"aria-live": "polite",
+						children: loading ? loadingLabel : loadErrorLabel
+					})
+				}) : null, renderItems(itemChildren, depth + 1, item.id)]
+			})]
+		}, item.id);
+	});
+	const rootStyle = {
+		...style,
+		...indentation !== void 0 ? { "--puzzle-tree-indentation": typeof indentation === "number" ? `${indentation}px` : indentation } : {}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		...rootProps,
+		role: "tree",
+		"aria-multiselectable": selectionMode === "multiple" || void 0,
+		className: (0, _puzzle_ui_core.cn)("puzzle-tree", `puzzle-tree--${size}`, className),
+		style: rootStyle,
+		dir,
+		tabIndex: visibleItems.length === 0 ? 0 : void 0,
+		onFocusCapture: () => {
+			focusWithinTree.current = true;
+		},
+		onBlurCapture: (event) => {
+			const nextTarget = event.relatedTarget;
+			const target = event.target;
+			if (event.currentTarget.contains(target) && (nextTarget && !event.currentTarget.contains(nextTarget) || !nextTarget && target.isConnected)) focusWithinTree.current = false;
+		},
+		children: renderItems(items)
+	});
+};
+const findItemById = (nodes, id, getChildren) => {
+	for (const item of nodes) {
+		if (item.id === id) return item;
+		const found = findItemById(getChildren(item), id, getChildren);
+		if (found) return found;
+	}
+};
+exports.TreeView = TreeView;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/navigation/tree-view/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","useState","useRef","useMemo","useCallback","Link","cn"],"sources":["../../../../src/components/navigation/tree-view/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../link\";\nimport \"./tree-view.css\";\n\ntype TreeViewSelectionMode = \"none\" | \"single\" | \"multiple\";\ntype TreeViewSize = \"sm\" | \"md\";\n\ntype TreeViewItem<TData = unknown> = {\n  /** Stable, unique identifier for this node. */\n  id: string;\n\n  /** Visible node label. Supply textValue when the label is not plain text. */\n  label: ReactNode;\n\n  /** Optional destination. When supplied, the complete row renders as a Puzzle Link. */\n  href?: string;\n\n  /** Plain-text value used by typeahead when label is not a string or number. */\n  textValue?: string;\n\n  /** Optional icon displayed before the label. */\n  icon?: ReactNode;\n\n  /** Optional, non-interactive content displayed after the label. */\n  endAdornment?: ReactNode;\n\n  /** Child nodes for a loaded branch. Omit for a leaf or a lazily loaded branch. */\n  children?: TreeViewItem<TData>[];\n\n  /** Marks a node as expandable before its children have been loaded. */\n  hasChildren?: boolean;\n\n  /** Prevents selection and activation; branches can still expand so descendants remain accessible. */\n  disabled?: boolean;\n\n  /** Allows a node to be excluded from selection without disabling expansion. */\n  selectable?: boolean;\n\n  /** Optional application data associated with the node. */\n  data?: TData;\n};\n\ntype TreeViewItemState = {\n  expanded: boolean;\n  selected: boolean;\n  focused: boolean;\n  loading: boolean;\n  disabled: boolean;\n  hasChildren: boolean;\n};\n\ntype TreeViewProps<TData = unknown> = Omit<\n  ComponentPropsWithRef<\"ul\">,\n  | \"children\"\n  | \"onKeyDown\"\n  | \"onFocusCapture\"\n  | \"onBlurCapture\"\n  | \"role\"\n  | \"tabIndex\"\n  | \"aria-multiselectable\"\n> &\n  (\n    | { \"aria-label\": string; \"aria-labelledby\"?: string }\n    | { \"aria-labelledby\": string; \"aria-label\"?: string }\n  ) & {\n    /** Hierarchical data rendered by the tree. Node IDs must be unique. */\n    items: TreeViewItem<TData>[];\n\n    /** Selection behavior. Defaults to single selection. */\n    selectionMode?: TreeViewSelectionMode;\n\n    /** Initial expanded node IDs for uncontrolled usage. Defaults to []. */\n    defaultExpandedIds?: string[];\n\n    /** Expanded node IDs for controlled usage. */\n    expandedIds?: string[];\n\n    /** Called with the next expanded node IDs. */\n    onExpandedChange?: (expandedIds: string[]) => void;\n\n    /** Initial selected node IDs for uncontrolled usage. Defaults to []. */\n    defaultSelectedIds?: string[];\n\n    /** Selected node IDs for controlled usage. */\n    selectedIds?: string[];\n\n    /** Called with the next selected node IDs. */\n    onSelectionChange?: (selectedIds: string[]) => void;\n\n    /** Initial roving-focus target. Defaults to the first selected node, then the first root node. */\n    defaultFocusedId?: string;\n\n    /** Called when keyboard or pointer interaction moves focus to another node. */\n    onFocusedChange?: (focusedId: string) => void;\n\n    /** Loads the children of a node marked with hasChildren when it is first expanded. */\n    loadChildren?: (\n      item: TreeViewItem<TData>,\n    ) => Promise<TreeViewItem<TData>[]>;\n\n    /** Called when lazy loading fails. Re-collapse and re-expand the node to retry. */\n    onLoadChildrenError?: (item: TreeViewItem<TData>, error: unknown) => void;\n\n    /** Called when a node is activated with Enter. */\n    onItemActivate?: (item: TreeViewItem<TData>) => void;\n\n    /** Determines whether an item matches the current route. */\n    getItemActive?: (item: TreeViewItem<TData>) => boolean;\n\n    /**\n     * Custom node renderer. Replaces the icon, label and adornment of a row; the\n     * expand indicator, row element and tree semantics are kept. Keep its contents non-interactive.\n     */\n    renderItem?: (\n      item: TreeViewItem<TData>,\n      state: TreeViewItemState,\n    ) => ReactNode;\n\n    /** Custom node-icon renderer. */\n    renderIcon?: (\n      item: TreeViewItem<TData>,\n      state: TreeViewItemState,\n    ) => ReactNode;\n\n    /** Custom label renderer. Keep its contents non-interactive. */\n    renderLabel?: (\n      item: TreeViewItem<TData>,\n      state: TreeViewItemState,\n    ) => ReactNode;\n\n    /** Clicking the label of a branch toggles it instead of selecting it. Defaults to false. */\n    expandOnItemClick?: boolean;\n\n    /** Visual density. Defaults to md. */\n    size?: TreeViewSize;\n\n    /** Indentation between hierarchy levels, in CSS units. Defaults to the theme spacing token. */\n    indentation?: string | number;\n\n    /** Enables character-based typeahead navigation. Defaults to true. */\n    typeahead?: boolean;\n\n    /** Text announced and displayed while lazy children are loading. */\n    loadingLabel?: string;\n\n    /** Text displayed when lazy loading fails. */\n    loadErrorLabel?: string;\n\n    /** Class applied to each tree item. */\n    itemClassName?: string;\n  };\n\nconst normalizeIds = (ids: string[] | undefined) =>\n  Array.from(\n    new Set(\n      (ids ?? []).filter((id) => typeof id === \"string\" && id.length > 0),\n    ),\n  );\n\nconst getTextValue = <TData,>(item: TreeViewItem<TData>) => {\n  if (item.textValue !== undefined) return item.textValue;\n\n  if (typeof item.label === \"string\" || typeof item.label === \"number\") {\n    return String(item.label);\n  }\n\n  return \"\";\n};\n\nconst normalizeSearchText = (value: string) =>\n  value\n    .normalize(\"NFD\")\n    .replace(/[\\u0300-\\u036f]/g, \"\")\n    .toLocaleLowerCase();\n\nconst TreeView = <TData,>({\n  items,\n  selectionMode = \"single\",\n  defaultExpandedIds = [],\n  expandedIds,\n  onExpandedChange,\n  defaultSelectedIds = [],\n  selectedIds,\n  onSelectionChange,\n  defaultFocusedId,\n  onFocusedChange,\n  loadChildren,\n  onLoadChildrenError,\n  onItemActivate,\n  getItemActive,\n  renderItem,\n  renderIcon,\n  renderLabel,\n  expandOnItemClick = false,\n  typeahead = true,\n  size = \"md\",\n  indentation,\n  loadingLabel = \"Loading…\",\n  loadErrorLabel = \"Could not load children. Collapse and expand to retry.\",\n  itemClassName,\n  className,\n  style,\n  dir,\n  ...rootProps\n}: TreeViewProps<TData>) => {\n  const generatedId = useId();\n  const isExpandedControlled = expandedIds !== undefined;\n  const isSelectionControlled = selectedIds !== undefined;\n\n  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState(() =>\n    normalizeIds(defaultExpandedIds),\n  );\n\n  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState(() =>\n    normalizeIds(defaultSelectedIds),\n  );\n\n  const [focusedId, setFocusedId] = useState<string | undefined>(\n    () =>\n      defaultFocusedId ??\n      (selectionMode === \"none\"\n        ? undefined\n        : normalizeIds(selectedIds ?? defaultSelectedIds)[0]) ??\n      items[0]?.id,\n  );\n\n  const [loadedChildren, setLoadedChildren] = useState<\n    Map<string, TreeViewItem<TData>[]>\n  >(() => new Map());\n\n  const [loadingIds, setLoadingIds] = useState<string[]>([]);\n\n  const [loadErrors, setLoadErrors] = useState<Map<string, unknown>>(\n    () => new Map(),\n  );\n\n  const itemRefs = useRef(new Map<string, HTMLLIElement>());\n  const inFlightLoads = useRef(new Set<string>());\n  const previousExpandedIds = useRef<string[] | null>(null);\n  const pendingFocusId = useRef<string | null>(null);\n  const focusWithinTree = useRef(false);\n  const typeaheadState = useRef({ value: \"\", time: 0 });\n\n  const currentExpandedIds = isExpandedControlled\n    ? (expandedIds ?? [])\n    : uncontrolledExpandedIds;\n\n  const requestedSelectedIds = isSelectionControlled\n    ? (selectedIds ?? [])\n    : uncontrolledSelectedIds;\n\n  const currentSelectedIds =\n    selectionMode === \"single\"\n      ? requestedSelectedIds.slice(0, 1)\n      : requestedSelectedIds;\n\n  const expandedSet = useMemo(\n    () => new Set(normalizeIds(currentExpandedIds)),\n    [currentExpandedIds],\n  );\n\n  const selectedSet = useMemo(\n    () => new Set(normalizeIds(currentSelectedIds)),\n    [currentSelectedIds],\n  );\n\n  const loadingSet = useMemo(() => new Set(loadingIds), [loadingIds]);\n\n  const getChildren = useCallback(\n    (item: TreeViewItem<TData>) =>\n      item.children ?? loadedChildren.get(item.id) ?? [],\n    [loadedChildren],\n  );\n\n  const hasChildren = useCallback(\n    (item: TreeViewItem<TData>) => {\n      if (item.children !== undefined || loadedChildren.has(item.id)) {\n        return getChildren(item).length > 0;\n      }\n\n      return Boolean(item.hasChildren);\n    },\n    [getChildren, loadedChildren],\n  );\n\n  const visibleItems = useMemo(() => {\n    const result: TreeViewItem<TData>[] = [];\n\n    const visit = (nodes: TreeViewItem<TData>[]) => {\n      nodes.forEach((item) => {\n        result.push(item);\n\n        const children = getChildren(item);\n\n        if (\n          expandedSet.has(item.id) &&\n          hasChildren(item) &&\n          children.length > 0\n        ) {\n          visit(children);\n        }\n      });\n    };\n\n    visit(items);\n\n    return result;\n  }, [items, expandedSet, getChildren, hasChildren]);\n\n  const parentIds = useMemo(() => {\n    const result = new Map<string, string>();\n\n    const visit = (nodes: TreeViewItem<TData>[], parentId?: string) => {\n      nodes.forEach((item) => {\n        if (parentId !== undefined) {\n          result.set(item.id, parentId);\n        }\n\n        visit(getChildren(item), item.id);\n      });\n    };\n\n    visit(items);\n\n    return result;\n  }, [items, getChildren]);\n\n  const visibleIds = useMemo(\n    () => new Set(visibleItems.map((item) => item.id)),\n    [visibleItems],\n  );\n\n  let effectiveFocusedId = focusedId;\n\n  if (!effectiveFocusedId || !visibleIds.has(effectiveFocusedId)) {\n    let ancestor = effectiveFocusedId;\n\n    while (ancestor && !visibleIds.has(ancestor)) {\n      ancestor = parentIds.get(ancestor);\n    }\n\n    effectiveFocusedId = ancestor ?? visibleItems[0]?.id;\n  }\n\n  useEffect(() => {\n    if (pendingFocusId.current && visibleIds.has(pendingFocusId.current)) {\n      itemRefs.current.get(pendingFocusId.current)?.focus();\n      pendingFocusId.current = null;\n    }\n  }, [visibleItems, visibleIds]);\n\n  useEffect(() => {\n    if (focusedId !== effectiveFocusedId && effectiveFocusedId) {\n      setFocusedId(effectiveFocusedId);\n      onFocusedChange?.(effectiveFocusedId);\n\n      if (focusWithinTree.current) {\n        itemRefs.current.get(effectiveFocusedId)?.focus();\n      }\n    }\n  }, [effectiveFocusedId, focusedId, onFocusedChange]);\n\n  const commitExpandedIds = (nextIds: string[]) => {\n    const next = normalizeIds(nextIds);\n\n    if (!isExpandedControlled) {\n      setUncontrolledExpandedIds(next);\n    }\n\n    onExpandedChange?.(next);\n  };\n\n  const commitSelectedIds = (nextIds: string[]) => {\n    const next = normalizeIds(nextIds);\n\n    if (!isSelectionControlled) {\n      setUncontrolledSelectedIds(next);\n    }\n\n    onSelectionChange?.(next);\n  };\n\n  const loadNodeChildren = useCallback(\n    async (item: TreeViewItem<TData>) => {\n      if (!loadChildren || !item.hasChildren || item.children !== undefined) {\n        return;\n      }\n\n      if (loadedChildren.has(item.id) || inFlightLoads.current.has(item.id)) {\n        return;\n      }\n\n      inFlightLoads.current.add(item.id);\n      setLoadingIds((current) => [...current, item.id]);\n\n      setLoadErrors((current) => {\n        const next = new Map(current);\n        next.delete(item.id);\n        return next;\n      });\n\n      try {\n        const children = await loadChildren(item);\n\n        setLoadedChildren((current) => {\n          const next = new Map(current);\n          next.set(item.id, children);\n          return next;\n        });\n      } catch (error) {\n        setLoadErrors((current) => {\n          const next = new Map(current);\n          next.set(item.id, error);\n          return next;\n        });\n\n        onLoadChildrenError?.(item, error);\n      } finally {\n        inFlightLoads.current.delete(item.id);\n        setLoadingIds((current) => current.filter((id) => id !== item.id));\n      }\n    },\n    [loadChildren, loadedChildren, onLoadChildrenError],\n  );\n\n  // Also load branches that were expanded through default or controlled props.\n  // Tracking newly expanded IDs avoids retrying a failed request on unrelated renders.\n  useEffect(() => {\n    const previous = new Set(previousExpandedIds.current ?? []);\n\n    const newlyExpandedIds = currentExpandedIds.filter(\n      (id) => !previous.has(id),\n    );\n\n    previousExpandedIds.current = normalizeIds(currentExpandedIds);\n\n    newlyExpandedIds.forEach((id) => {\n      const item = findItemById(items, id, getChildren);\n      if (item) void loadNodeChildren(item);\n    });\n  }, [currentExpandedIds, items, getChildren, loadNodeChildren]);\n\n  const toggleExpanded = (item: TreeViewItem<TData>) => {\n    if (!hasChildren(item)) return;\n\n    const next = new Set(currentExpandedIds);\n\n    if (next.has(item.id)) {\n      next.delete(item.id);\n    } else {\n      next.add(item.id);\n      void loadNodeChildren(item);\n    }\n\n    commitExpandedIds(Array.from(next));\n  };\n\n  const selectItem = (item: TreeViewItem<TData>, toggleSingle = false) => {\n    if (\n      selectionMode === \"none\" ||\n      item.disabled ||\n      item.selectable === false\n    ) {\n      return;\n    }\n\n    if (selectionMode === \"single\") {\n      if (\n        currentSelectedIds.length === 1 &&\n        currentSelectedIds[0] === item.id\n      ) {\n        if (toggleSingle) commitSelectedIds([]);\n        return;\n      }\n\n      commitSelectedIds([item.id]);\n      return;\n    }\n\n    const next = new Set(currentSelectedIds);\n\n    if (next.has(item.id)) {\n      next.delete(item.id);\n    } else {\n      next.add(item.id);\n    }\n\n    commitSelectedIds(Array.from(next));\n  };\n\n  const focusItem = (id: string) => {\n    const element = itemRefs.current.get(id);\n\n    if (element) {\n      element.focus();\n    } else {\n      setFocusedId(id);\n      onFocusedChange?.(id);\n      pendingFocusId.current = id;\n    }\n  };\n\n  const expandSiblings = (itemId: string) => {\n    const parentId = parentIds.get(itemId);\n\n    const parentItem = parentId\n      ? findItemById(items, parentId, getChildren)\n      : undefined;\n\n    const siblings = parentItem ? getChildren(parentItem) : items;\n    const next = new Set(currentExpandedIds);\n    let changed = false;\n\n    siblings.forEach((sibling) => {\n      if (hasChildren(sibling) && !next.has(sibling.id)) {\n        next.add(sibling.id);\n        changed = true;\n        void loadNodeChildren(sibling);\n      }\n    });\n\n    if (changed) {\n      commitExpandedIds(Array.from(next));\n    }\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLLIElement>,\n    item: TreeViewItem<TData>,\n    parentId?: string,\n  ) => {\n    const eventTarget = event.target as HTMLElement;\n\n    if (eventTarget.closest('[role=\"treeitem\"]') !== event.currentTarget) {\n      return;\n    }\n\n    if (\n      eventTarget.closest(\n        \"button, a, input, select, textarea, [contenteditable='true']\",\n      )\n    ) {\n      return;\n    }\n\n    const index = visibleItems.findIndex(\n      (visibleItem) => visibleItem.id === item.id,\n    );\n\n    const inheritedDirection = event.currentTarget\n      .closest(\"[dir]\")\n      ?.getAttribute(\"dir\");\n\n    const isRtl =\n      dir === \"rtl\" || (dir === undefined && inheritedDirection === \"rtl\");\n\n    const openKey = isRtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const closeKey = isRtl ? \"ArrowRight\" : \"ArrowLeft\";\n    let handled = false;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        if (index < visibleItems.length - 1) {\n          focusItem(visibleItems[index + 1].id);\n        }\n\n        handled = true;\n        break;\n\n      case \"ArrowUp\":\n        if (index > 0) {\n          focusItem(visibleItems[index - 1].id);\n        }\n\n        handled = true;\n        break;\n\n      case \"Home\":\n        if (visibleItems[0]) {\n          focusItem(visibleItems[0].id);\n        }\n\n        handled = true;\n        break;\n\n      case \"End\":\n        if (visibleItems.length > 0) {\n          focusItem(visibleItems[visibleItems.length - 1].id);\n        }\n\n        handled = true;\n        break;\n\n      case \"Enter\":\n        if (item.href) {\n          if (!item.disabled) {\n            event.currentTarget\n              .querySelector<HTMLAnchorElement>(\"a.puzzle-tree__row\")\n              ?.click();\n\n            onItemActivate?.(item);\n          }\n        } else if (hasChildren(item)) {\n          toggleExpanded(item);\n          if (!item.disabled) onItemActivate?.(item);\n        } else {\n          selectItem(item);\n          if (!item.disabled) onItemActivate?.(item);\n        }\n\n        handled = true;\n        break;\n\n      case \" \":\n      case \"Spacebar\":\n        selectItem(item, true);\n        handled = true;\n        break;\n\n      case \"*\":\n        expandSiblings(item.id);\n        handled = true;\n        break;\n\n      default:\n        if (\n          event.key.length === 1 &&\n          !event.altKey &&\n          !event.ctrlKey &&\n          !event.metaKey\n        ) {\n          if (!typeahead) break;\n\n          const currentTime = event.timeStamp;\n          const isExpired = currentTime - typeaheadState.current.time > 500;\n          const previousValue = isExpired ? \"\" : typeaheadState.current.value;\n          const normalizedPrevious = normalizeSearchText(previousValue);\n          const normalizedKey = normalizeSearchText(event.key);\n\n          const isRepeatedCharacter =\n            normalizedPrevious.length > 0 &&\n            [...normalizedPrevious].every(\n              (character) => character === normalizedKey,\n            );\n\n          const searchValue = isRepeatedCharacter\n            ? event.key\n            : `${previousValue}${event.key}`;\n\n          typeaheadState.current = {\n            value: searchValue,\n            time: currentTime,\n          };\n\n          const normalizedSearch = normalizeSearchText(searchValue);\n\n          const orderedItems = [\n            ...visibleItems.slice(index + 1),\n            ...visibleItems.slice(0, index + 1),\n          ];\n\n          const match = orderedItems.find((candidate) =>\n            normalizeSearchText(getTextValue(candidate)).startsWith(\n              normalizedSearch,\n            ),\n          );\n\n          if (match) {\n            focusItem(match.id);\n          }\n\n          handled = true;\n        }\n    }\n\n    if (event.key === openKey) {\n      if (hasChildren(item)) {\n        if (!expandedSet.has(item.id)) {\n          toggleExpanded(item);\n        } else {\n          const firstChild = getChildren(item)[0];\n          if (firstChild) focusItem(firstChild.id);\n        }\n      }\n\n      handled = true;\n    } else if (event.key === closeKey) {\n      if (hasChildren(item) && expandedSet.has(item.id)) {\n        toggleExpanded(item);\n      } else if (parentId) {\n        focusItem(parentId);\n      }\n\n      handled = true;\n    }\n\n    if (handled) {\n      event.preventDefault();\n    }\n  };\n\n  const handleItemClick = (\n    event: MouseEvent<HTMLLIElement>,\n    item: TreeViewItem<TData>,\n  ) => {\n    const target = event.target as HTMLElement;\n    const targetTreeItem = target.closest('[role=\"treeitem\"]');\n\n    // Ignore bubbled clicks from descendants and clicks on custom interactive adornments.\n    if (targetTreeItem !== event.currentTarget) return;\n\n    if (\n      target.closest(\n        \"button, a, input, select, textarea, [data-tree-stop-selection]\",\n      )\n    ) {\n      return;\n    }\n\n    focusItem(item.id);\n\n    if (\n      hasChildren(item) &&\n      (target.closest(\"[data-tree-toggle]\") || expandOnItemClick)\n    ) {\n      toggleExpanded(item);\n      return;\n    }\n\n    selectItem(item);\n  };\n\n  /**\n   * Handles pointer activation of a linked row.\n   *\n   * The row link is the navigation target, but the tree item remains the\n   * roving-focus element. Clicking the expansion affordance is the exception:\n   * it expands the branch and deliberately does not navigate.\n   */\n  const handleItemLinkClick = (\n    event: MouseEvent<HTMLAnchorElement>,\n    item: TreeViewItem<TData>,\n  ) => {\n    const target = event.target as Element;\n\n    if (target.closest(\"[data-tree-toggle]\")) {\n      event.preventDefault();\n      event.stopPropagation();\n\n      focusItem(item.id);\n      toggleExpanded(item);\n      return;\n    }\n\n    if (item.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    focusItem(item.id);\n    selectItem(item);\n  };\n\n  const renderItems = (\n    nodes: TreeViewItem<TData>[],\n    depth = 0,\n    parentId?: string,\n  ): ReactNode =>\n    nodes.map((item, index) => {\n      const itemChildren = getChildren(item);\n      const itemHasChildren = hasChildren(item);\n      const expanded = itemHasChildren && expandedSet.has(item.id);\n      const disabled = Boolean(item.disabled);\n      const active = Boolean(getItemActive?.(item));\n\n      const selected =\n        selectionMode !== \"none\" &&\n        selectedSet.has(item.id) &&\n        item.selectable !== false &&\n        !disabled;\n\n      const loading = loadingSet.has(item.id);\n      const focused = effectiveFocusedId === item.id;\n\n      const itemState: TreeViewItemState = {\n        expanded,\n        selected,\n        focused,\n        loading,\n        disabled,\n        hasChildren: itemHasChildren,\n      };\n\n      const iconContent = renderIcon ? renderIcon(item, itemState) : item.icon;\n      const itemId = `${generatedId}-item-${encodeURIComponent(item.id)}`;\n\n      const selectable =\n        selectionMode !== \"none\" && item.selectable !== false && !disabled;\n\n      const hasLoadError = loadErrors.has(item.id);\n\n      const rowContent = (\n        <>\n          {itemHasChildren ? (\n            <span\n              className=\"puzzle-tree__toggle\"\n              data-tree-toggle=\"true\"\n              data-expanded={expanded || undefined}\n              aria-hidden=\"true\"\n            />\n          ) : (\n            <span className=\"puzzle-tree__toggle-spacer\" aria-hidden=\"true\" />\n          )}\n\n          {renderItem ? (\n            renderItem(item, itemState)\n          ) : (\n            <>\n              {iconContent != null && (\n                <span className=\"puzzle-tree__icon\" aria-hidden=\"true\">\n                  {iconContent}\n                </span>\n              )}\n\n              <span className=\"puzzle-tree__label\">\n                {renderLabel ? renderLabel(item, itemState) : item.label}\n              </span>\n\n              {item.endAdornment != null && (\n                <span className=\"puzzle-tree__adornment\">\n                  {item.endAdornment}\n                </span>\n              )}\n            </>\n          )}\n        </>\n      );\n\n      const row =\n        item.href !== undefined ? (\n          <Link\n            href={item.href}\n            className=\"puzzle-tree__row\"\n            tabIndex={-1}\n            aria-current={active ? \"page\" : undefined}\n            aria-disabled={disabled || undefined}\n            data-tree-row-link=\"true\"\n            onClick={(event) => handleItemLinkClick(event, item)}\n          >\n            {rowContent}\n          </Link>\n        ) : (\n          <div className=\"puzzle-tree__row\">{rowContent}</div>\n        );\n\n      return (\n        <li\n          key={item.id}\n          ref={(element) => {\n            if (element) {\n              itemRefs.current.set(item.id, element);\n            } else {\n              itemRefs.current.delete(item.id);\n            }\n          }}\n          id={itemId}\n          role=\"treeitem\"\n          aria-level={depth + 1}\n          aria-posinset={index + 1}\n          aria-setsize={nodes.length}\n          aria-expanded={itemHasChildren ? expanded : undefined}\n          aria-selected={selectable ? selected : undefined}\n          aria-disabled={disabled || undefined}\n          aria-busy={loading || undefined}\n          tabIndex={focused ? 0 : -1}\n          className={cn(\"puzzle-tree__item\", itemClassName)}\n          data-tree-item-id={item.id}\n          data-active={active || undefined}\n          data-selected={selected || undefined}\n          data-disabled={disabled || undefined}\n          data-expanded={itemHasChildren ? expanded : undefined}\n          onFocus={(event) => {\n            if (event.target !== event.currentTarget) return;\n\n            if (focusedId !== item.id) {\n              setFocusedId(item.id);\n              onFocusedChange?.(item.id);\n            }\n          }}\n          onClick={(event) => handleItemClick(event, item)}\n          onKeyDown={(event) => handleKeyDown(event, item, parentId)}\n        >\n          {row}\n\n          {itemHasChildren && expanded && (\n            <ul className=\"puzzle-tree__group\" role=\"group\">\n              {loading || hasLoadError ? (\n                <li\n                  role=\"none\"\n                  className={cn(\n                    \"puzzle-tree__status-row\",\n                    hasLoadError &&\n                      !loading &&\n                      \"puzzle-tree__status-row--error\",\n                  )}\n                >\n                  <span role=\"status\" aria-live=\"polite\">\n                    {loading ? loadingLabel : loadErrorLabel}\n                  </span>\n                </li>\n              ) : null}\n\n              {renderItems(itemChildren, depth + 1, item.id)}\n            </ul>\n          )}\n        </li>\n      );\n    });\n\n  const rootStyle = {\n    ...style,\n    ...(indentation !== undefined\n      ? {\n          \"--puzzle-tree-indentation\":\n            typeof indentation === \"number\" ? `${indentation}px` : indentation,\n        }\n      : {}),\n  } as CSSProperties;\n\n  return (\n    <ul\n      {...rootProps}\n      role=\"tree\"\n      aria-multiselectable={selectionMode === \"multiple\" || undefined}\n      className={cn(\"puzzle-tree\", `puzzle-tree--${size}`, className)}\n      style={rootStyle}\n      dir={dir}\n      tabIndex={visibleItems.length === 0 ? 0 : undefined}\n      onFocusCapture={() => {\n        focusWithinTree.current = true;\n      }}\n      onBlurCapture={(event) => {\n        const nextTarget = event.relatedTarget;\n        const target = event.target as HTMLElement;\n\n        if (\n          event.currentTarget.contains(target) &&\n          ((nextTarget && !event.currentTarget.contains(nextTarget as Node)) ||\n            (!nextTarget && target.isConnected))\n        ) {\n          focusWithinTree.current = false;\n        }\n      }}\n    >\n      {renderItems(items)}\n    </ul>\n  );\n};\n\nconst findItemById = <TData,>(\n  nodes: TreeViewItem<TData>[],\n  id: string,\n  getChildren: (item: TreeViewItem<TData>) => TreeViewItem<TData>[],\n): TreeViewItem<TData> | undefined => {\n  for (const item of nodes) {\n    if (item.id === id) return item;\n\n    const found = findItemById(getChildren(item), id, getChildren);\n    if (found) return found;\n  }\n\n  return undefined;\n};\n\nexport {\n  TreeView,\n  type TreeViewProps,\n  type TreeViewItem,\n  type TreeViewItemState,\n  type TreeViewSelectionMode,\n  type TreeViewSize,\n};\n"],"mappings":"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"}

package/dist/components/navigation/tree-view/index.d.cts

@@ -0,0 +1,96 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+type TreeViewSelectionMode = "none" | "single" | "multiple";
+type TreeViewSize = "sm" | "md";
+type TreeViewItem<TData = unknown> = {
+  /** Stable, unique identifier for this node. */
+  id: string;
+  /** Visible node label. Supply textValue when the label is not plain text. */
+  label: ReactNode;
+  /** Optional destination. When supplied, the complete row renders as a Puzzle Link. */
+  href?: string;
+  /** Plain-text value used by typeahead when label is not a string or number. */
+  textValue?: string;
+  /** Optional icon displayed before the label. */
+  icon?: ReactNode;
+  /** Optional, non-interactive content displayed after the label. */
+  endAdornment?: ReactNode;
+  /** Child nodes for a loaded branch. Omit for a leaf or a lazily loaded branch. */
+  children?: TreeViewItem<TData>[];
+  /** Marks a node as expandable before its children have been loaded. */
+  hasChildren?: boolean;
+  /** Prevents selection and activation; branches can still expand so descendants remain accessible. */
+  disabled?: boolean;
+  /** Allows a node to be excluded from selection without disabling expansion. */
+  selectable?: boolean;
+  /** Optional application data associated with the node. */
+  data?: TData;
+};
+type TreeViewItemState = {
+  expanded: boolean;
+  selected: boolean;
+  focused: boolean;
+  loading: boolean;
+  disabled: boolean;
+  hasChildren: boolean;
+};
+type TreeViewProps<TData = unknown> = Omit<ComponentPropsWithRef<"ul">, "children" | "onKeyDown" | "onFocusCapture" | "onBlurCapture" | "role" | "tabIndex" | "aria-multiselectable"> & ({
+  "aria-label": string;
+  "aria-labelledby"?: string;
+} | {
+  "aria-labelledby": string;
+  "aria-label"?: string;
+}) & {
+  /** Hierarchical data rendered by the tree. Node IDs must be unique. */
+  items: TreeViewItem<TData>[];
+  /** Selection behavior. Defaults to single selection. */
+  selectionMode?: TreeViewSelectionMode;
+  /** Initial expanded node IDs for uncontrolled usage. Defaults to []. */
+  defaultExpandedIds?: string[];
+  /** Expanded node IDs for controlled usage. */
+  expandedIds?: string[];
+  /** Called with the next expanded node IDs. */
+  onExpandedChange?: (expandedIds: string[]) => void;
+  /** Initial selected node IDs for uncontrolled usage. Defaults to []. */
+  defaultSelectedIds?: string[];
+  /** Selected node IDs for controlled usage. */
+  selectedIds?: string[];
+  /** Called with the next selected node IDs. */
+  onSelectionChange?: (selectedIds: string[]) => void;
+  /** Initial roving-focus target. Defaults to the first selected node, then the first root node. */
+  defaultFocusedId?: string;
+  /** Called when keyboard or pointer interaction moves focus to another node. */
+  onFocusedChange?: (focusedId: string) => void;
+  /** Loads the children of a node marked with hasChildren when it is first expanded. */
+  loadChildren?: (item: TreeViewItem<TData>) => Promise<TreeViewItem<TData>[]>;
+  /** Called when lazy loading fails. Re-collapse and re-expand the node to retry. */
+  onLoadChildrenError?: (item: TreeViewItem<TData>, error: unknown) => void;
+  /** Called when a node is activated with Enter. */
+  onItemActivate?: (item: TreeViewItem<TData>) => void;
+  /** Determines whether an item matches the current route. */
+  getItemActive?: (item: TreeViewItem<TData>) => boolean;
+  /**
+   * Custom node renderer. Replaces the icon, label and adornment of a row; the
+   * expand indicator, row element and tree semantics are kept. Keep its contents non-interactive.
+   */
+  renderItem?: (item: TreeViewItem<TData>, state: TreeViewItemState) => ReactNode;
+  /** Custom node-icon renderer. */
+  renderIcon?: (item: TreeViewItem<TData>, state: TreeViewItemState) => ReactNode;
+  /** Custom label renderer. Keep its contents non-interactive. */
+  renderLabel?: (item: TreeViewItem<TData>, state: TreeViewItemState) => ReactNode;
+  /** Clicking the label of a branch toggles it instead of selecting it. Defaults to false. */
+  expandOnItemClick?: boolean;
+  /** Visual density. Defaults to md. */
+  size?: TreeViewSize;
+  /** Indentation between hierarchy levels, in CSS units. Defaults to the theme spacing token. */
+  indentation?: string | number;
+  /** Enables character-based typeahead navigation. Defaults to true. */
+  typeahead?: boolean;
+  /** Text announced and displayed while lazy children are loading. */
+  loadingLabel?: string;
+  /** Text displayed when lazy loading fails. */
+  loadErrorLabel?: string;
+  /** Class applied to each tree item. */
+  itemClassName?: string;
+};
+declare const TreeView: <TData>({ items, selectionMode, defaultExpandedIds, expandedIds, onExpandedChange, defaultSelectedIds, selectedIds, onSelectionChange, defaultFocusedId, onFocusedChange, loadChildren, onLoadChildrenError, onItemActivate, getItemActive, renderItem, renderIcon, renderLabel, expandOnItemClick, typeahead, size, indentation, loadingLabel, loadErrorLabel, itemClassName, className, style, dir, ...rootProps }: TreeViewProps<TData>) => import("react").JSX.Element;
+export { TreeView, type TreeViewItem, type TreeViewItemState, type TreeViewProps, type TreeViewSelectionMode, type TreeViewSize };