RDP Capability Builder

A monorepo containing two main systems:

1. Grove (packages/grove) - A server-driven UI (SDUI) engine that defines, validates, and executes dynamic UI layouts from declarative JSON documents.
2. Frontend App (src/) - A React frontend template with sidebar navigation, theming, and Zustand state management. Built on shadcn/ui, Tailwind CSS, and React Router.

Architecture

rdp-capability-builder/
├── packages/grove/          # SDUI engine library (pure TypeScript, no React)
│   ├── src/
│   │   ├── types/           # Core type definitions (nodes, actions, conditions, expressions)
│   │   ├── registry/        # Node type registry + 43 built-in component definitions
│   │   ├── signals/         # Expression resolver, effect handlers, propagation engine
│   │   └── validation/      # Zod schemas + semantic validation rules
│   └── tests/
│       ├── fixtures/        # deploy-flow.json, invalid-examples.json
│       ├── registry/        # Registry tests
│       ├── signals/         # Resolver + propagation engine tests
│       ├── types/           # Schema-to-type sync guards
│       └── validation/      # Validator tests
├── src/                     # React frontend app
│   ├── components/          # UI components (layout/, ui/)
│   ├── hooks/               # Custom React hooks
│   ├── nav/                 # Navigation configuration
│   ├── pages/               # Page components
│   └── stores/              # Zustand stores
└── public-registry/         # Public registry assets

How Grove Works

A Grove document is a JSON structure describing a multi-screen UI:

• Screens contain a tree of nodes (Button, Input, Flex, Card, etc.)
• Nodes declare props, children, slots, and signal wirings
• Signal wirings map events (e.g. "pressed") to actions (setState, fetch, navigate, etc.)
• Expressions like {{state.userName}} resolve values inside action handlers at runtime
• Bindings (bind) map prop names to state paths for reactive prop updates
• Conditions gate visibility and signal execution with operators like eq, gt, truthy, etc.

The engine processes this at runtime:

1. Registry knows what node kinds exist and their schemas
2. Validation checks documents for structural and semantic correctness
3. Propagation Engine dispatches signals, resolves expressions, executes actions, and manages state

Quick Start

npm install
npm run dev          # Start the frontend dev server
npm run test         # Run all tests (root + packages)
npm run lint         # ESLint with auto-fix
npm run format       # Prettier formatting

Grove package commands

cd packages/grove
npx tsc --noEmit     # Type check
npx vitest run       # Run grove tests
npx vitest           # Watch mode

Tech Stack

| Layer | Technology | | ------------ | ----------------------------------- | | UI Framework | React 19, React Router 7 | | Components | shadcn/ui, Radix UI, Tailwind CSS 4 | | State | Zustand 5 | | SDUI Engine | Pure TypeScript, Zod | | Build | Vite 7, SWC | | Test | Vitest 3 | | Lint | ESLint 9, Prettier |

Naming Conventions

• shadcn/ui components - kebab-case (sidebar.tsx, dropdown-menu.tsx)
• Custom components - PascalCase (ErrorBoundary.tsx, DataWrapper.tsx)
• Grove source - camelCase files (propagation.ts, resolver.ts)

Navigation

Frontend navigation is configured in /src/nav/. See nav/README.md for details.