60 lines
3.1 KiB
Markdown
60 lines
3.1 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: App UI SHALL Use A Local TrueGrowth UI Entry
|
|
|
|
New customer-facing app UI SHALL import reusable primitives from the local `@/ui` entry so that controls, overlays, cards, tables, forms, and feedback states share one visual system.
|
|
|
|
#### Scenario: New app page needs controls
|
|
|
|
- **WHEN** a new app page needs buttons, inputs, dialogs, drawers, tabs, cards, tables, badges, progress, or empty states
|
|
- **THEN** it SHALL use components from `@/ui`
|
|
- **AND** it SHALL NOT create page-local replacements for those primitives
|
|
|
|
#### Scenario: Component needs brand emphasis
|
|
|
|
- **WHEN** a component needs a primary action, selected state, or focus ring
|
|
- **THEN** it SHALL use TrueGrowth orange tokens
|
|
- **AND** it SHALL NOT introduce blue primary actions or hard-coded primary colors
|
|
|
|
### Requirement: AI Image Page SHALL Be The Golden UI Reference
|
|
|
|
The AI image-generation page at `/image` SHALL be the concrete golden UI reference for TrueGrowth page layout, component density, media/result presentation, hover actions, loading states, failed states, popovers, dialogs, and light/dark styling.
|
|
|
|
#### Scenario: Contributor designs or refactors a page
|
|
|
|
- **WHEN** a contributor designs or refactors a navigation-entered page, dialog, drawer, or popover
|
|
- **THEN** they SHALL compare the result against the `/image` golden page standard in `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md`
|
|
- **AND** they SHALL preserve the same orange accent, quiet surfaces, compact controls, single-surface inputs, and browser-verified polish
|
|
|
|
#### Scenario: Contributor changes a generator page
|
|
|
|
- **WHEN** a contributor changes a generator page such as AI video, digital human, music, image editing, or batch creation
|
|
- **THEN** the page SHALL use the `/image` split layout pattern with a full-height left creation panel and right task/result feed
|
|
- **AND** generated media SHALL be grouped by batch, displayed at its real ratio, and expose secondary actions through hover or compact menus
|
|
|
|
#### Scenario: Contributor changes a dialog or popover
|
|
|
|
- **WHEN** a contributor changes settings, model, parameter, knowledge, picker, or action dialogs
|
|
- **THEN** the surface SHALL use the same radius, light/dark surfaces, orange focus states, and single-layer input treatment as `/image`
|
|
- **AND** it SHALL NOT introduce stacked white input wrappers or unrelated component-library styling
|
|
|
|
### Requirement: New App UI SHALL Use Lucide Icons
|
|
|
|
New app UI SHALL use `lucide-react` for icons so icon size, stroke, and visual weight remain consistent.
|
|
|
|
#### Scenario: New action button needs an icon
|
|
|
|
- **WHEN** a new action button, nav item, toolbar item, or empty state needs an icon
|
|
- **THEN** it SHALL import an icon from `lucide-react`
|
|
- **AND** it SHALL NOT import from `tdesign-icons-react`
|
|
|
|
### Requirement: TDesign SHALL Be Legacy Compatibility Only
|
|
|
|
TDesign SHALL remain only as a temporary compatibility boundary for old Drawnix/opentu surfaces while visible UI is migrated to the TrueGrowth UI system.
|
|
|
|
#### Scenario: New app code is added
|
|
|
|
- **WHEN** a new app page or component is added under `apps/web/src`
|
|
- **THEN** it SHALL NOT import `tdesign-react`
|
|
- **AND** it SHALL use `@/ui` primitives instead
|