--- name: ui-package-stack description: > ERP UI stack: design-system tokens, form-ui domain inputs, list-shell, filter-builder, line-grid (QUPS), spreadsheet-operator (keyboard grids), doc-shell, policy-ui, master-detail, command-palette. Use when building TanStack Router list/doc screens instead of one-off shadcn copies. sources: - knowledge/ui-package-stack.md --- # UI package stack ## When to load - New **list page** or **document with lines** in React - Wiring **money/timestamp/percent** inputs on TanStack Form - Choosing between headless (`money/react/fields`) vs styled (`@eristack/form-ui`) ## Default path 1. `@eristack/design-system` — import `./tokens.css`, wrap app in `DensityProvider` from `./react`. 2. Domain fields — headless hooks first; `form-ui` for styled inputs. 3. Lists — `@eristack/list-shell` + `@eristack/data-grid/react` query sync. 4. Docs — `@eristack/doc-shell` + `@eristack/line-grid` for QUPS lines; `@eristack/spreadsheet-operator` for keyboard/active-grid (not xlsx). 5. Actions — `@eristack/policy-ui` with rbac/pbac checks from the app. ## Release / peers - First npm versions are **`0.1.0`** (minor from monorepo `0.0.0`). Inter-UI peers use **`^0.1.0`** — not `^0.0.0`. - Consumer install floors: `@eristack/ai-knowledge#upgrading-eristack` §2.3. ## Do not - Put QUPS math in UI packages — call `@eristack/qups` from `line-grid` only. - Ship `@eristack/feature-*` screens from this stack. - Duplicate filter JSON parsers — use `@eristack/data-grid` parse/serialize. See **knowledge/ui-package-stack.md** for ship order, peer table, and end-to-end wiring.