## 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