Skill tree navigator
Arrow keys move between entries, Right and Left expand and collapse, Enter opens details.
{#each rows as { branch, level }, index (branch.node.id)}
{@const node = branch.node}
{@const hasChildren = branch.children.length > 0}
- handleKeydown(e, index)}
onclick={() => onActivate(node)}
onfocus={() => {
activeId = node.id;
onFocusNode?.(node);
}}
>
{node.label}
{node.category}
{/each}