Component spec — TreeViewer
Component spec — TreeViewer
Stub component: wiki/src/components/TreeViewer.astro
Wireframe reference: /ui/wireframes/tree-viewer/
API reference: GET /tree/state (/tech/api/tree-state/)
Rendering modes
| Mode | Description | Phase |
|---|---|---|
static | SVG snapshot from @walkrpg/data topology. No walker state, no allocation. Used for wiki documentation embeds. | Phase 9 (current) |
interactive | React component with tap/click, zoom, pan, confirm modal, mastery popover. Requires walker allocation state from API. | Phase 11 |
Prop contract
The full prop contract is documented in wiki/src/components/TreeViewer.astro as a comment block. Key shapes:
topology— cluster, node, keystone, mastery data fromGET /tree/stateor directly from@walkrpg/data.allocations— walker’s current node and keystone allocations (allprovisional: falsein mock mode).available— computed available unlocks from the server.availablePoints— integer, drives the header counter.onAllocate— callback for interactive mode; fires beforePOST /tree/allocate.
Visual states
See /ui/wireframes/tree-viewer/ for the complete node-state visual spec. Summary:
| State | Fill | Border | Label |
|---|---|---|---|
| Allocated (small) | --color-region-plenny 80% | 2dp accent | Visible |
| Unallocated reachable | --color-surface-variant | 2dp muted | Visible |
| Locked (prereq) | --color-surface | 2dp disabled | Visible |
| Path preview | --color-surface-variant | 2dp warning dashed | Visible |
| Notable (any) | Larger shape | 3dp | Visible |
| Mastery | Double ring | 3dp gold | Visible |
| Keystone locked | --color-surface | 3dp disabled | Visible + lock glyph |
| Keystone unlocked | --color-surface-elevated | 3dp warning pulse | Visible |
| Keystone allocated | Accent fill | 3dp accent | Visible |
Open questions (phase 11 blockers)
- POST /tree/allocate spec — backend-engineer to author before phase 11. See prop contract comment in TreeViewer.astro for expected shape.
- Mastery pick endpoint —
POST /tree/allocateor separatePOST /tree/mastery/pick? Needs mechanics-designer + backend-engineer alignment. - Keystone cost — do keystones consume available points, or are they purely quest-gated?
mechanics-designerto confirm. See tree-viewer wireframe FLAG_LEAD note. - Pan + zoom model — phase 11 adds full pan/zoom for the 150-200 node production tree. The phase 9 starter cluster fits one screen at standard scale; no pan needed in phase 9.