Tree View

<!-- Basic tree view -->
<ul role="tree" aria-label="Project files">
  <li role="treeitem" aria-expanded="true" aria-level="1"
      aria-setsize="2" aria-posinset="1" tabindex="0">
    <div class="tree__node">
      <button class="tree__toggle" aria-hidden="true" tabindex="-1">
        <svg class="tree__chevron tree__chevron--expanded"><!-- chevron --></svg>
      </button>
      <svg class="tree__icon" aria-hidden="true"><!-- folder icon --></svg>
      <span class="tree__label">src</span>
    </div>
    <ul role="group">
      <li role="treeitem" aria-level="2" aria-setsize="3"
          aria-posinset="1" tabindex="-1">
        <div class="tree__node">
          <span class="tree__toggle-spacer"></span>
          <svg class="tree__icon" aria-hidden="true"><!-- file icon --></svg>
          <span class="tree__label">index.ts</span>
        </div>
      </li>
      <li role="treeitem" aria-level="2" aria-setsize="3"
          aria-posinset="2" tabindex="-1">
        <div class="tree__node">
          <span class="tree__toggle-spacer"></span>
          <svg class="tree__icon" aria-hidden="true"><!-- file icon --></svg>
          <span class="tree__label">App.tsx</span>
        </div>
      </li>
      <li role="treeitem" aria-expanded="false" aria-level="2"
          aria-setsize="3" aria-posinset="3" tabindex="-1">
        <div class="tree__node">
          <button class="tree__toggle" aria-hidden="true" tabindex="-1">
            <svg class="tree__chevron"><!-- chevron --></svg>
          </button>
          <svg class="tree__icon" aria-hidden="true"><!-- folder icon --></svg>
          <span class="tree__label">components</span>
        </div>
        <!-- children hidden when aria-expanded="false" -->
      </li>
    </ul>
  </li>
  <li role="treeitem" aria-level="1" aria-setsize="2"
      aria-posinset="2" tabindex="-1">
    <div class="tree__node">
      <span class="tree__toggle-spacer"></span>
      <svg class="tree__icon" aria-hidden="true"><!-- file icon --></svg>
      <span class="tree__label">package.json</span>
    </div>
  </li>
</ul>

<style>
[role="tree"] {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
}
[role="group"] {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tree__node {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tree__node:hover {
  background: var(--color-surface-hover);
}
[role="treeitem"][tabindex="0"] > .tree__node {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}
[role="treeitem"][aria-selected="true"] > .tree__node {
  background: var(--color-primary-100);
}
.tree__toggle {
  all: unset;
  display: flex;
  width: 16px;
  height: 16px;
}
.tree__toggle-spacer {
  width: 16px;
  flex-shrink: 0;
}
.tree__chevron {
  transition: transform var(--duration-fast);
}
.tree__chevron--expanded {
  transform: rotate(90deg);
}
[role="group"] {
  padding-left: 20px;
}
</style>

interface TreeNode {
  id: string;
  label: string;
  icon?: React.ReactNode;
  children?: TreeNode[];
}

interface TreeViewProps {
  data: TreeNode[];
  label: string;
  selected?: string;
  onSelect?: (nodeId: string) => void;
}

function TreeView({ data, label, selected, onSelect }: TreeViewProps) {
  const [expanded, setExpanded] = React.useState<Set<string>>(new Set());
  const treeRef = React.useRef<HTMLUListElement>(null);

  const toggleExpand = (id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const handleKeyDown = (e: React.KeyboardEvent, node: TreeNode, level: number) => {
    const tree = treeRef.current;
    if (!tree) return;
    const items = Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]'));
    const current = e.currentTarget as HTMLElement;
    const idx = items.indexOf(current);

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        items[idx + 1]?.focus();
        break;
      case 'ArrowUp':
        e.preventDefault();
        items[idx - 1]?.focus();
        break;
      case 'ArrowRight':
        e.preventDefault();
        if (node.children?.length) {
          if (!expanded.has(node.id)) toggleExpand(node.id);
          else items[idx + 1]?.focus();
        }
        break;
      case 'ArrowLeft':
        e.preventDefault();
        if (node.children?.length && expanded.has(node.id)) {
          toggleExpand(node.id);
        } else {
          // Move to parent
          const parentGroup = current.closest('[role="group"]');
          const parentItem = parentGroup?.closest('[role="treeitem"]') as HTMLElement | null;
          parentItem?.focus();
        }
        break;
      case 'Enter':
      case ' ':
        e.preventDefault();
        onSelect?.(node.id);
        break;
      case 'Home':
        e.preventDefault();
        items[0]?.focus();
        break;
      case 'End':
        e.preventDefault();
        items[items.length - 1]?.focus();
        break;
    }
  };

  function renderNode(node: TreeNode, level: number, posInSet: number, setSize: number, isFirst: boolean) {
    const isBranch = node.children && node.children.length > 0;
    const isExpanded = expanded.has(node.id);

    return (
      <li
        key={node.id}
        role="treeitem"
        aria-level={level}
        aria-setsize={setSize}
        aria-posinset={posInSet}
        aria-expanded={isBranch ? isExpanded : undefined}
        aria-selected={selected === node.id}
        tabIndex={isFirst && level === 1 ? 0 : -1}
        onKeyDown={(e) => handleKeyDown(e, node, level)}
        onFocus={(e) => e.stopPropagation()}
      >
        <div
          className={`tree__node${selected === node.id ? ' tree__node--selected' : ''}`}
          onClick={() => {
            if (isBranch) toggleExpand(node.id);
            onSelect?.(node.id);
          }}
        >
          {isBranch ? (
            <span className={`tree__chevron${isExpanded ? ' tree__chevron--expanded' : ''}`}>▸</span>
          ) : (
            <span className="tree__toggle-spacer" />
          )}
          {node.icon && <span className="tree__icon">{node.icon}</span>}
          <span className="tree__label">{node.label}</span>
        </div>
        {isBranch && isExpanded && (
          <ul role="group" style={{ paddingLeft: 20 }}>
            {node.children!.map((child, i) =>
              renderNode(child, level + 1, i + 1, node.children!.length, false)
            )}
          </ul>
        )}
      </li>
    );
  }

  return (
    <ul role="tree" aria-label={label} ref={treeRef} className="tree">
      {data.map((node, i) => renderNode(node, 1, i + 1, data.length, i === 0))}
    </ul>
  );
}