Skill Tree Branch Graph Features Block for React

Edit MODULES at the top of the file, in tree order: each has an id, a name, a sentence, a size in kilobytes and, except for the root, the id of the module it needs. The rules for switching on and off, the counter and the bundle size all come from that list. The layout draws three levels: the root, its children and theirs.

Switching on adds the module and everything above it in the tree. Switching off removes the module and everything below it. Both are small pure functions (needs, dependants and toggled) that you can test on their own, so the tree never holds a module without what it needs.

Every module is a button in the tab order: Enter or Space switches it. The arrow keys are a shortcut on top of that: Down and Up walk the list in tree order, the start-side arrow goes to a module's parent and the end-side arrow to its first child. Focus also fills the panel beside the tree, so a keyboard user sees the same detail a pointer does.

Each module is a toggle button with its name and whether it is pressed, inside a list named Modules. The counter is a live output, so switching a module reads "6 of 9 modules enabled", and the dashed or solid connectors are decoration that the pressed state already says.

An indented list of the same toggles in the same order, with no connectors: a module's depth is its indent. Everything else, including the counter and the panel, is the same.

No: a tree keeps its direction, so the figure is dir="ltr". The header, the counter and the panel follow the page's direction.