84Build a tree view with expand, collapse, and checkbox selection

Build a tree of checkboxes like a file-permission or category picker. Nodes are { id, label, children? }; nodes without children are leaves.

Selection is stored as the set of checked leaf ids. A parent is:

• checked when all its leaves are checked,
• unchecked when none are,
• indeterminate otherwise.

First write helpers:

• leafIds(node): every leaf id under node (or [node.id] for a leaf).
• checkState(node, checked): "checked", "unchecked" or "indeterminate" for a Set of checked leaf ids.
• toggleNode(node, checked): a new Set. If the node is fully checked, uncheck all its leaves; otherwise check all of them.

Then build <CheckboxTree nodes={roots} defaultChecked={[]} defaultExpanded={[]} onChange={fn} />:

• each node has <input type="checkbox" aria-label={label}> whose checked and indeterminate properties follow checkState;
• parents have a <button aria-label="Expand {label}" aria-expanded> (its label switches to Collapse {label}); children render only when expanded;
• call onChange(sortedLeafIds) after every toggle.