@grida/tree-view
Headless, agnostic tree-view controller for editors and IDEs — a pure state machine plus a small set of helpers, rendered with whatever framework you want. The showcases below are the same TreeController wired to different surfaces — canvas, explorer, document, desktop.
One TreeController drives the panel and the artboard. Select, hover, reorder, delete on either side — the other follows.
Drag rows to reorder · click a shape to select · ⌫ to delete
Identical controller and intent bridge — only the row renderer and the canvas palette changed. Reordering a layer re-stacks the design.
Drag rows to reorder · click a shape to select · ⌫ to delete
Filesystem semantics: drops resolve into the nearest folder. Selecting a file opens it — selection is the only wire to the editor pane.
Workspace sidebar with nested pages, emoji affordances, and drag-into-page. Selecting a page swaps the document on the right — one controller, one selection channel.
Notes
Pages live in the sidebar — selecting one opens it here. Drop a page onto another to nest; drag between two pages to reorder. The sidebar and this document are wired to the same TreeController.
Today
- ☐ Triage CodeRabbit comments on PR 719
- ☐ Wire F12 reversed+desiredDepth test
- ☑ Reverse-aware drag math (F10)
- ☑ Tolerant
expandTo(F11.1)
Multi-column rows, zebra striping, double-click to expand — the same core, dressed as macOS and dropped onto the desktop.
Built for editor scale.
The state machine, the math, the intents — packaged so adopters ship a tree in a day, not a quarter.
Canvas layers
Reverse-children flatten, group highlight, selection-aware drag — the controller already knows what a design tool's layers panel needs.
Dark layers panel
Same controller, themed for any palette. Compose constraints to enforce frame / component / instance semantics.
File explorer
Filesystem drag rule — drops resolve into the nearest folder. Drop-target highlight cascades through descendants.
Workspace sidebar
Emoji-prefixed pages, nested toggles, drop-into-page. Selection wires the document body in three lines.
Native window
Multi-column rows, zebra striping, double-click-to-expand — all consumer-side; the package never touches the markup.