Initial TrueGrowth source import

docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md

@@ -0,0 +1,103 @@
+# TrueGrowth Golden Image Page UI Standard
+
+`http://127.0.0.1:7200/image` is the approved golden page for TrueGrowth desktop UI. Future page work must use this page as the visual, interaction, spacing, and quality reference before inventing a new layout.
+
+This standard applies to all navigation-entered first-level pages, app pages, drawers, popovers, dialogs, and settings surfaces. Complex canvas editing can keep its canvas-specific interaction model, but its visible shell controls, dialogs, and panels must still inherit these rules.
+
+## Product Character
+
+- The product is a minimalist AI creative workbench, not a marketing site and not a generic admin template.
+- Use TrueGrowth orange `#ff5b00` as the only primary action, selected, progress, and focus accent.
+- Keep the left navigation stable and quiet. Page work happens in the content area.
+- The outer workbench must never become a scroll container during theme/status focus changes. If the left navigation content exceeds viewport height, scroll the navigation item rail internally and keep the bottom status/theme controls visible.
+- Light mode uses a clean white left creation surface and a soft gray result surface. Dark mode uses near-black surfaces with visible low-contrast borders.
+- UI density should feel professional and calm: compact controls, clear labels, generous but not wasteful whitespace.
+
+## Golden Layout
+
+Generator pages such as AI 图片, AI 视频, 数字人, 音乐, and other creation flows SHALL follow the `/image` structure:
+
+```text
+left nav | left creation panel (about 1/3) | right result feed (about 2/3)
+```
+
+- The left panel is a full-height operation area, not a floating card.
+- The right panel is a full-height soft result area with task batches and history.
+- The gap between panels is tight and useful; do not create a large empty moat between form and results.
+- Page content should start close to the navigation boundary. Do not add broad top padding or a global topbar.
+- Theme switching must not move the page, change the content origin, or push the sidebar footer out of the viewport.
+- On smaller widths, panels may stack, but controls and media must not overlap or wrap awkwardly.
+
+Non-generator pages must still borrow the same rhythm:
+
+- Exploration/App Center: full content surface, large visual discovery cards, hover actions, no cluttered button grids.
+- Asset/result libraries: large media-first grids, full media display, title/actions on hover or beneath media.
+- Task/status pages: dense timeline/list rows using the same typography, chips, orange progress, and quiet surfaces.
+- Settings/model pages: left-side grouped configuration, right-side status/detail panels, single-layer inputs, restrained borders.
+
+## Form Standard
+
+- Controls are 40-42px tall, 8-10px radius, and use orange focus rings.
+- Labels are visible and concise. Avoid raw implementation words, debug values, or unexplained `auto` text in user-facing summaries.
+- Textareas and long prompts are calm, lightly bordered, and sized to the workflow.
+- Model selection and parameter selection are real clickable controls. No decorative inactive pills.
+- Generate actions are centered/aligned to the form control width.
+- Avoid reset buttons unless the workflow truly needs one.
+- Search fields must be single-surface: either wrapper owns border/background and input is transparent, or input owns border/background. Never place a white input inside a white bordered wrapper.
+
+## Media And Result Feed
+
+- Results are grouped by generation batch. One generation request is one feed batch.
+- A batch shows one concise title, then only essential metadata: count, size/ratio, model, and status.
+- Generated images/videos display at their natural ratio with `object-fit: contain`; do not crop, add white circles, or put a decorative frame behind the media.
+- Multiple results in one batch sit on one horizontal rail and scroll horizontally.
+- Completed media surfaces are visually quiet; default actions are hidden until hover or placed in a compact action row.
+- Primary visible batch actions: `编辑`, `重新生成`, and a compact `更多` menu. Secondary actions such as publish, insert canvas, download, and delete live under `更多` unless the workflow requires direct exposure.
+- Publish actions route to the publish center with the chosen asset preselected and previewed.
+- Failure reason belongs at the batch/status level, not inside the media placeholder.
+
+## Loading, Empty, And Failed States
+
+- Loading placeholders use the requested generation ratio from parameters.
+- Processing media placeholders center a circular orange progress indicator above one concise label. The progress ring and label must be one vertical stack and must not overlap.
+- While loading/progress is visible, do not show the generic image/video placeholder icon.
+- Failed media uses a centered placeholder with a clean failure state; the batch shows the concrete failure reason.
+- Empty states are directional and short. They should tell the user what will appear there, not expose technical state.
+
+## Overlays, Popovers, And Dialogs
+
+- Dialogs, dropdowns, popovers, drawers, and menus must use the same radius, orange focus states, and light/dark surfaces as `/image`.
+- Avoid stacked card borders inside dialogs. If a section already has a surface, the inner input should be transparent or borderless.
+- Parameter popovers should be compact and graphical where possible, especially size/ratio choices.
+- Sliders are preferred for bounded numeric generation settings such as image count; image count max is 10 unless a product requirement changes it.
+- Hover menus should reveal actions smoothly without covering important media content.
+
+## Icon And Component Rules
+
+- New visible UI uses `@/ui` primitives and `lucide-react` icons.
+- Do not add new `tdesign-react` or `tdesign-icons-react` imports in app UI.
+- Do not create page-local basic buttons, inputs, cards, tabs, popovers, or progress components.
+- 21st.dev, Tremor, or Magic UI snippets may be copied locally only after being retokenized into this style. They are not separate runtime design systems.
+
+## Browser QA Requirement
+
+Every page migration must include browser evidence:
+
+- Visit the real route at `http://127.0.0.1:7200/...`.
+- Capture desktop screenshot and at least one narrower viewport when practical.
+- Check light and dark mode for custom surfaces.
+- Inspect console warnings/errors and explain any remaining relevant issue.
+- Exercise one primary interaction: open a model/parameter selector, hover media actions, open a dialog, search/filter, or trigger the route's main CTA.
+- Verify no overlap, no text clipping, no button wrapping, no nested white search fields, and no media crop/white backing.
+
+## Migration Checklist
+
+For each navigation-entered page:
+
+- [ ] It clearly follows either the generator split layout or the closest `/image`-derived library/status/settings layout.
+- [ ] Primary action is orange and only one primary action is visually dominant.
+- [ ] Forms use the same control height, radius, labels, focus, and density.
+- [ ] Results/media use full-ratio display and hover/compact actions.
+- [ ] Dialogs/popovers use single-surface inputs and consistent radius.
+- [ ] Light and dark mode are both styled.
+- [ ] Browser screenshot review has been completed.