Skip to main content
TermRock
GitHub
ComponentsNavigation

Component · Navigation

Tree Navigation

Hierarchical route navigation with expansion, lazy children, typeahead, active ancestors, and route distinct from focus. Distinct from data Tree.

Kind
widget
Input
interactive
Canvas
120×40

Live preview

Loading terminal preview.

Static terminal poster. Choose Run live to start the Rust demo.

Ghosttytree-navigation/project
Loading terminal poster…
○ loading posterNo input — rendered state only
Tree Navigation · exact mounted Rust story
01 · Purpose
What it is for
Hierarchical route navigation with expansion, lazy children, typeahead, active ancestors, and route distinct from focus. Distinct from data Tree.
Best fit: Navigation · navigation · widget
02 · Behavior
What the mounted story proves
  1. 01
    TreeNavigation
    Representative 120×40 terminal state.
  2. 02
    Passive paint
    No keyboard or pointer action is claimed by this representative story.
  3. 03
    Evidence stays explicit
    5 covered · 8 partial · 4 missing axes.
03 · Implement
Install, then start from exact code
Install
cargo add termrock --git https://github.com/tailrocks/termrock.git --rev 5283c2acf9154d0cfcd37b1ffe821c00faf90ea2
Add TermRock once. Keep domain effects in the host application.
Minimal implementation
Exact Rust setup used by tree-navigation/project.
Open to load code.
04 · Adapt
Variants and composition
Variants
Use the preview Variant menu when alternate registered stories exist. Each selection mounts a fresh configuration.
Composition
Navigation · navigation · widget
05 · Reference
API, tokens, accessibility
API
TreeNavigationOpen source ↗
Tokens
DesignSystemInspect exact story code for roles and capability projection.
Accessibility
Input contract mountedNo input claim in the representative story.
Contract
Evidence in progress5/23 axes covered
06 · Go deeper
Advanced guidance
Authored implementation guidance
Purpose. Project explorers, schema browsers, settings trees, documentation
outlines. Not the multi-select data Tree widget.


Route ≠ focus


    

  • route() — active destination (survives filter when still in projection)
    • 

  • focus() — keyboard cursor
    • 

  • Enter on routeable leaf → RouteChanged
    • 



Arrows


    

  • ← collapse or parent
    • 

  • → expand / lazy load / first child
    • 

  • ↑/↓ move focus
    • 



Lazy children


LazyLoadRequested { id, generation } → host loads → apply_lazy_result + new
projection → reconcile_route keeps selection when possible.


Examples


example_project_tree · example_schema_tree · example_settings_tree ·
example_docs_tree
Ownership boundary
TermRock owns reusable terminal rendering and interaction state. The host owns domain data, policy, persistence, authorization, and side effects.
Evidence status
5 covered, 8 partial, and 4 missing contract axes. Missing evidence is not a behavior claim.
Tree
Hierarchical collection with stable IDs, semantic live-tone tiers, pinned-prefix horizontal label scroll, lazy children, expansion, selection/check, metadata, typeahead, virtualization, and ASCII glyphs.
Alert Dialog
High-risk confirmation distinct from Dialog: exact scope, consequences, reversibility, target, safer alternatives; typed confirmation, justified countdown, safe initial focus, non-dismissable critical state.