From 00ef8b969d01173a52127cfa7e9e01c8112abf48 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Thu, 11 Jun 2026 01:08:13 +0700 Subject: [PATCH] doc: collect Banatie Lab documentation in docs/labs - extract Lab design system from feature/lab-frontend branch - move legacy workbench and expanded-image-view docs from apps/landing - add overview README with planned pages, API scope, and design direction Co-Authored-By: Claude Fable 5 --- docs/labs/README.md | 48 +++ docs/labs/design-system.md | 364 ++++++++++++++++++ .../labs/legacy-expanded-image-view.md | 0 .../labs/legacy-workbench.md | 0 4 files changed, 412 insertions(+) create mode 100644 docs/labs/README.md create mode 100644 docs/labs/design-system.md rename apps/landing/src/components/shared/EXPANDED_IMAGE_VIEW.md => docs/labs/legacy-expanded-image-view.md (100%) rename apps/landing/WORKBENCH_DOCUMENTATION.md => docs/labs/legacy-workbench.md (100%) diff --git a/docs/labs/README.md b/docs/labs/README.md new file mode 100644 index 0000000..1d40a08 --- /dev/null +++ b/docs/labs/README.md @@ -0,0 +1,48 @@ +# Banatie Lab + +Banatie Lab is the browser UI for working with the Banatie API: generating images, browsing the gallery of created images, managing prompts, aliases, and flows. It is referenced on the landing page as "Web Lab". + +The Lab will be built **from scratch**. This folder collects everything that was previously designed or documented, so the ideas are not lost. + +## Documents in this folder + +| Document | Origin | Purpose | +|----------|--------|---------| +| [design-system.md](design-system.md) | `feature/lab-design` / `feature/lab-frontend` branches (`apps/landing/src/app/(lab)/CLAUDE.md`) | Full design system and layout architecture for the Lab UI | +| [legacy-workbench.md](legacy-workbench.md) | `apps/landing/WORKBENCH_DOCUMENTATION.md` (main) | Text-to-Image workbench — predecessor of the Generate page (MinimizedApiKey badge, PromptReuseButton) | +| [legacy-expanded-image-view.md](legacy-expanded-image-view.md) | `apps/landing/src/components/shared/EXPANDED_IMAGE_VIEW.md` (main) | Full-size image modal with metadata — building block for the gallery | + +## Planned feature set (from design-system.md) + +Pages that were planned in the abandoned `feature/lab-*` branches: + +- `/lab/generate` — generation workbench (prompt, references, parameters) +- `/lab/images` — gallery of generated images with filters +- `/lab/live` — live URL / prompt-URL testing +- `/lab/upload` — file upload interface + +Additional concepts mentioned in the design doc: alias management and flow control. + +## API capabilities the UI must expose + +The functional scope is defined by the existing API documentation: + +- [../api/image-generation.md](../api/image-generation.md) — basic generation +- [../api/image-generation-advanced.md](../api/image-generation-advanced.md) — reference images, aliases (`@hero`), flows, flow-scoped aliases (`@best`), dynamic aliases (`@last`, `@first`, `@upload`), regeneration +- [../api/live-url.md](../api/live-url.md) — CDN architecture, live URLs (`/live/{scope}?prompt=...`), prompt-based caching +- [../api/images-upload.md](../api/images-upload.md) — uploads +- [../api/admin.md](../api/admin.md) — API key management + +## Design direction (summary) + +- Work-focused tool, not marketing — compact typography, tight spacing, like Google AI Studio +- Dual color system: zinc for layout chrome, slate for forms/cards; purple→cyan accent gradient +- Lucide React icons only, no emojis +- Scroll-aware collapsing header, left filter sidebar, contextual footer +- Responsive 768px–1920px+ + +See [design-system.md](design-system.md) for the complete spec. + +## What does NOT exist + +There is no PRD with a detailed feature list (gallery filters, prompt list, flow list behavior). The pages above plus the API docs are the only recorded ideas. A proper PRD should be written here before implementation starts. diff --git a/docs/labs/design-system.md b/docs/labs/design-system.md new file mode 100644 index 0000000..792f12f --- /dev/null +++ b/docs/labs/design-system.md @@ -0,0 +1,364 @@ +# Lab Section Design System + +The Lab section is a production-ready UI interface for interacting with the Banatie API service. It provides a clean, work-focused experience for image generation, gallery browsing, alias management, and flow control. + +## File Structure + +``` +apps/landing/src/ +├── app/(lab)/ +│ ├── CLAUDE.md # This design documentation +│ ├── layout.tsx # Root lab layout with scroll context +│ └── lab/ +│ ├── layout.tsx # Sub-layout with PageProvider +│ ├── page.tsx # Redirect to /lab/generate +│ ├── generate/page.tsx # Generation workbench +│ ├── images/page.tsx # Image gallery browser +│ ├── live/page.tsx # Live generation testing +│ └── upload/page.tsx # File upload interface +│ +├── components/layout/lab/ +│ ├── LabLayout.tsx # Main layout (sidebar + content + footer) +│ ├── LabSidebar.tsx # Left filter panel +│ └── LabFooter.tsx # Contextual footer with links +│ +├── components/lab/ +│ ├── GenerateFormPlaceholder.tsx # Generation form component +│ └── FilterPlaceholder.tsx # Reusable filter checkbox/radio +│ +└── contexts/ + └── lab-scroll-context.tsx # Scroll state for header collapse +``` + +## Design Principles + +1. **Work-focused, not marketing** - Small typography, efficient spacing +2. **Clean and functional** - Like Google AI Studio +3. **Dual color system** - Zinc for layout, Slate for forms +4. **Consistent icons** - Lucide React only, no emojis +5. **Responsive** - Works on 768px to 1920px+ screens + +--- + +## Color System + +### Layout/Chrome → Zinc (Neutral Gray) +Used for sidebar, footer, and layout borders: +```css +bg-zinc-950 /* Sidebar background */ +bg-zinc-950/50 /* Footer background, layout wrappers */ +border-zinc-800 /* Layout borders, dividers */ +text-zinc-400 /* Sidebar text */ +text-zinc-500 /* Footer text, muted */ +``` + +### Forms/Cards → Slate (Original Style) +Used for cards, inputs, and interactive UI elements: +```css +bg-slate-900/80 /* Card backgrounds */ +bg-slate-900/50 /* Empty states, lighter cards */ +bg-slate-800 /* Input backgrounds, secondary surfaces */ +border-slate-700 /* Card borders, input borders */ +text-gray-400 /* Labels, secondary text */ +text-gray-500 /* Placeholders, hints */ +``` + +### Accent Colors (Purple/Cyan) +```css +/* Primary gradient */ +bg-gradient-to-r from-purple-600 to-cyan-600 +hover:from-purple-500 hover:to-cyan-500 +shadow-lg shadow-purple-900/30 +focus:ring-2 focus:ring-purple-500 + +/* Single-color accents */ +text-purple-400 /* Links, interactive text */ + +/* Info banners */ +bg-purple-900/10 border-purple-700/50 +``` + +### Status Colors +```css +/* Success */ bg-emerald-500/10 border-emerald-500/30 text-emerald-400 +/* Warning */ bg-amber-500/10 border-amber-500/30 text-amber-400 +/* Error */ bg-red-500/10 border-red-500/30 text-red-400 +/* Info */ bg-purple-900/10 border-purple-700/50 text-purple-400 +``` + +--- + +## Typography Scale + +### Headings (Practical Sizes) +```tsx +// Page Title (only on main pages) +text-lg font-semibold text-white + +// Section Title +text-base font-semibold text-white + +// Card Title +text-sm font-medium text-white +``` + +### Body Text +```tsx +// Primary body +text-sm text-gray-300 + +// Secondary/descriptions +text-sm text-gray-400 + +// Small text (hints, metadata) +text-xs text-gray-500 + +// Labels (form fields) +text-xs font-medium text-gray-400 +``` + +### Interactive +```tsx +// Button text +text-sm font-semibold + +// Links +text-sm text-purple-400 hover:text-purple-300 + +// Badge/count +text-xs text-gray-600 +``` + +--- + +## Spacing System + +### Padding +```tsx +// Cards +p-4 md:p-5 + +// Compact cards +p-3 + +// Form inputs +px-3 py-2 + +// Buttons (primary) +px-4 py-2.5 + +// Buttons (secondary) +px-3 py-2 +``` + +### Section Spacing +```tsx +// Page padding +p-4 md:p-6 + +// Between sections +space-y-4 + +// Between cards in grid +gap-3 md:gap-4 + +// Between form fields +gap-2 + +// Label to input +mb-1.5 +``` + +### Border Radius +```tsx +rounded-lg /* Standard (inputs, small cards) */ +rounded-xl /* Medium (cards) */ +``` + +--- + +## Component Patterns + +### Page Header +```tsx +
+
+ +
+

Generate

+

Create AI images from text prompts

+
+
+
+``` + +### Form Card (Slate) +```tsx +
+ {/* content */} +
+``` + +### Form Input (Slate) +```tsx +
+ + +
+``` + +### Textarea (Slate) +```tsx +