Tracked in DEVEX-620 · Project: Workspaces webview + UI library
The core of the library — a tree that looks and behaves like the native VS Code tree. Builds on the @repo/ui scaffold and semantic theme boundary established in DEVEX-618.
Scope
Tree, TreeItem, TreeGroup, TreeIndentGuideuseTreeKeyboardNav: roving tabindex, Arrow keys, Home/End, Enter/Space, type-ahead- ARIA tree roles/attributes, selection model, chevrons, indent guides, hover-revealed trailing action slot (for inline row actions)
Out of scope
- Virtualization (API designed so
@tanstack/react-virtual can drop in later without consumer changes)
- Workspace-specific row content
VS Code fidelity
- Match the native VS Code tree look and behavior using native HTML elements styled to match VS Code's own controls, using the VS Code Elements implementation as a design reference without importing it
- Tree row geometry, chevron, indent guide, and selection visuals consistent with VS Code defaults
- Minimize custom styles — rely on inherited values from the WebViews wherever possible; component CSS is inherit-first and never uses line-height/vertical-padding math
tokens.css maps VS Code variables to semantic --ui-* tokens — add any new tree-specific tokens here (create the file if it doesn't already exist; conflicts will be resolved later)control.css provides the shared flex-centering geometry base — add tree row geometry here if applicable (create the file if it doesn't already exist; conflicts will be resolved later)- Support high contrast through VS Code contrast variables, plus
forced-colors and prefers-reduced-motion media handling
Library boundary (NPM-ready)
- No
@repo/* or relative cross-package imports from packages/ui (enforced by ESLint)
- React stays a peer dependency; no new runtime dependencies for the tree itself
- Shared internals reached through
package.json subpath imports
Storybook
- One
.stories.tsx per public component (Tree, TreeItem, TreeGroup, TreeIndentGuide) with a combined matrix story covering nesting, groups, selection, disabled, and action slot
- Each matrix story snapshotted in Light, Dark, High Contrast, and High Contrast Light via Chromatic
- Interaction assertions via play functions; detailed behavior stays in Vitest
Acceptance
- Side-by-side eyeball check against the native tree across the four theme families
- Focused Testing Library/Vitest tests covering keyboard nav behaviors (roving tabindex, Arrow keys, Home/End, Enter/Space, type-ahead)
- Validated with type checking, linting, formatting, UI tests, Storybook CI build, production build, and
git diff --check
Tracked in DEVEX-620 · Project: Workspaces webview + UI library
The core of the library — a tree that looks and behaves like the native VS Code tree. Builds on the
@repo/uiscaffold and semantic theme boundary established in DEVEX-618.Scope
Tree,TreeItem,TreeGroup,TreeIndentGuideuseTreeKeyboardNav: roving tabindex, Arrow keys, Home/End, Enter/Space, type-aheadOut of scope
@tanstack/react-virtualcan drop in later without consumer changes)VS Code fidelity
tokens.cssmaps VS Code variables to semantic--ui-*tokens — add any new tree-specific tokens here (create the file if it doesn't already exist; conflicts will be resolved later)control.cssprovides the shared flex-centering geometry base — add tree row geometry here if applicable (create the file if it doesn't already exist; conflicts will be resolved later)forced-colorsandprefers-reduced-motionmedia handlingLibrary boundary (NPM-ready)
@repo/*or relative cross-package imports frompackages/ui(enforced by ESLint)package.jsonsubpath importsStorybook
.stories.tsxper public component (Tree,TreeItem,TreeGroup,TreeIndentGuide) with a combined matrix story covering nesting, groups, selection, disabled, and action slotAcceptance
git diff --check