Tree view
Folders and hierarchies: the media library tree and the vision-check failure reasons (module → checkpoint → category) with their toggles.
Covers: M15. Exports: Tree.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
States
5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
No folders yet
Upload into the library root, or create a folder.
Density
Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Both apps
One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
Tree·@rj/admin-kit- Props
nodes·loadChildren·selected·onToggle(optional switch per node)- States
- collapsed · expanded · loading · selected · off · empty · error
- shadcn / Radix
- Collapsible (recursive)
- Package underneath
- @tanstack/react-virtual if large
- Accessibility
- role=tree / treeitem with aria-level, aria-expanded; ←→ collapse/expand, ↑↓ move
- API operations
- admin.media-library.tree · admin.vision-checks.failure-reasons.children · …toggle-module / …toggle-checkpoint / …toggle-category
- Phone variant
- same tree, 44px rows