@breakergames/design-system 0.1.0 → 0.2.0

package/guidelines/Guidelines.md

@@ -12,8 +12,8 @@ Design system for **makabaka.io**, a UGC game discovery and creation platform.
 
 ## Installation
 ```tsx
-import '@makabaka/design-system/theme.css';
-import { Button, Card, Header, ... } from '@makabaka/design-system';
+import '@breakergames/design-system/theme.css';
+import { Button, Card, Header, ... } from '@breakergames/design-system';
 ```
 
 ## Rules
@@ -39,3 +39,11 @@ import { Button, Card, Header, ... } from '@makabaka/design-system';
 - See `design-tokens/typography.md` for typography scale
 - See `design-tokens/spacing.md` for spacing and radius
 - See `components/*.md` for individual component guides
+
+## Page Design Guides
+- See `pages/discover.md` for the Discovery homepage
+- See `pages/dashboard.md` for the "My Games" dashboard
+- See `pages/game-detail.md` for the game detail modal/page
+- See `pages/login.md` for the login page
+- See `pages/register.md` for the registration page
+- See `pages/games-list.md` for the games listing page

package/guidelines/pages/dashboard.md

@@ -0,0 +1,120 @@
+# Dashboard Page ("My Games" / "我的")
+
+Personal game management hub where users view and manage their created game scenarios.
+
+## Layout
+
+```
+┌──────────────────────────────────┐
+│  Header (fixed, frosted glass)   │
+├──────────────────────────────────┤
+│                                  │
+│  My Games                        │
+│  Manage your game creations      │
+│                                  │
+│  ┌─────────┬─────────┬─────────┐ │
+│  │ 📊 12   │ 🎮 856  │ 🌐 5    │ │
+│  │Scenarios│ Plays   │Published│ │
+│  └─────────┴─────────┴─────────┘ │
+│                                  │
+│  🦙 In Progress (2)              │
+│  ┌────────────────────────────┐  │
+│  │ ⟳ "Medieval Quest"        │  │
+│  │   Generating... 45%        │  │
+│  │   [Resume]  [Delete]       │  │
+│  └────────────────────────────┘  │
+│  ┌────────────────────────────┐  │
+│  │ ✕ "Space Wars"             │  │
+│  │   Failed                   │  │
+│  │   [Retry]   [Delete]       │  │
+│  └────────────────────────────┘  │
+│                                  │
+│  📝 Drafts (4)                   │
+│  ┌──────────┐ ┌──────────┐      │
+│  │ Draft    │ │ Draft    │      │
+│  │ Card     │ │ Card     │      │
+│  │ [Yellow  │ │ [Yellow  │      │
+│  │  Badge]  │ │  Badge]  │      │
+│  └──────────┘ └──────────┘      │
+│  ┌──────────┐ ┌──────────┐      │
+│  │ Draft    │ │ Draft    │      │
+│  │ Card     │ │ Card     │      │
+│  └──────────┘ └──────────┘      │
+│                                  │
+│  🌐 Published (5)                │
+│  ┌──────────┐ ┌──────────┐      │
+│  │ Live     │ │ Live     │      │
+│  │ Card     │ │ Card     │      │
+│  │ [Green   │ │ [Green   │      │
+│  │  Badge]  │ │  Badge]  │      │
+│  └──────────┘ └──────────┘      │
+│                                  │
+└──────────────────────────────────┘
+```
+
+## Components Used
+
+```tsx
+import {
+  Header,
+  StatCard,
+  ScenarioCard,
+  Badge,
+  Button,
+  Modal,
+} from '@breakergames/design-system';
+```
+
+## Sections
+
+### 1. Header
+- Same as all pages: fixed top, frosted glass
+- "My Games" tab active (or navigate from Discover)
+
+### 2. Page Title
+- Title: "My Games" / "我的游戏" — large text (text-2xl, bold)
+- Subtitle: "Manage your game creations" / "管理你的游戏创作" — muted text
+
+### 3. Stats Row (3 columns)
+- Three `StatCard` components in a row
+- Card 1: Scenario count (purple value) with 📊 icon
+- Card 2: Total plays (pink value) with 🎮 icon
+- Card 3: Published count (green value) with 🌐 icon
+- Each card: dark surface (`--maka-bg-card`), subtle border, rounded-lg
+
+### 4. In-Progress Section
+- Section header: "🦙 In Progress" + count badge
+- Only shown if there are generating/failed drafts
+- Each draft is a custom status card:
+  - **Generating**: spinning icon, scenario name, progress percentage, [Resume] + [Delete] buttons
+  - **Failed**: red X icon, scenario name, error text, [Retry] + [Delete] buttons
+  - **Preview**: game icon, scenario name, "Ready to preview", [Preview] + [Delete] buttons
+- Cards have left border accent (purple for generating, red for failed, green for preview)
+
+### 5. Drafts Section
+- Section header: "📝 Drafts" + count
+- 2-column grid of `ScenarioCard` components
+- Each card has a yellow "Draft" `Badge` in top-left corner
+- Cards show: cover image (or gradient placeholder), title, template type
+- Click opens game detail modal with Publish/Delete actions
+
+### 6. Published Section
+- Section header: "🌐 Published" + count
+- 2-column grid of `ScenarioCard` components
+- Each card has a green "Live" `Badge`
+- Cards show: cover image, title, play count, like count
+- Click opens game detail modal with Unpublish/Upgrade/Delete actions
+
+### 7. Empty State
+- Shown when user has zero scenarios
+- Center-aligned: large emoji (🎮), "No games yet" text
+- "Create your first game" `Button` (primary variant)
+- Button navigates to MakaAI chat
+
+## Design Notes
+- Background: `var(--maka-bg-dark)` (#1b2838)
+- Max-width: 672px centered on desktop
+- Stats cards use colored values: purple (#7c5cfa), pink (#f43f5e), green (#22c55e)
+- Draft status cards have colored left border for quick status scanning
+- Game detail opens as a `Modal` with action buttons at bottom
+- ASG games show "Upgrade" button (quick→standard→deep) in detail modal

package/guidelines/pages/discover.md

@@ -0,0 +1,115 @@
+# Discover Page (Homepage)
+
+The main landing page of makabaka.io. A dark-themed game discovery feed inspired by Steam/Epic Games Store.
+
+## Layout
+
+```
+┌──────────────────────────────────┐
+│  Header (fixed, frosted glass)   │
+│  Logo | Recommend·Community·Msgs │
+│  Avatar                          │
+├──────────────────────────────────┤
+│                                  │
+│  ┌────────────────────────────┐  │
+│  │   FeaturedCard (hero)      │  │
+│  │   aspect-ratio: 4/5        │  │
+│  │   cover image + gradient   │  │
+│  │   overlay + Badge + title  │  │
+│  │   + play/like stats        │  │
+│  └────────────────────────────┘  │
+│                                  │
+│  🔥 Hot Games                    │
+│  ┌──────────┐ ┌──────────┐      │
+│  │  Large   │ │  Small 1 │      │
+│  │  Card    │ ├──────────┤      │
+│  │          │ │  Small 2 │      │
+│  └──────────┘ └──────────┘      │
+│                                  │
+│  ✨ New Games                    │
+│  ┌──────────┐ ┌──────────┐      │
+│  │  Large   │ │  Small 1 │      │
+│  │  Card    │ ├──────────┤      │
+│  │          │ │  Small 2 │      │
+│  └──────────┘ └──────────┘      │
+│                                  │
+│  📋 More Recommendations         │
+│  ┌─────┐ ┌─────┐                │
+│  │     │ │     │ Waterfall       │
+│  │     │ │     │ 2 columns       │
+│  │     │ └─────┘ right column    │
+│  └─────┘ ┌─────┐ offset 24px    │
+│  ┌─────┐ │     │                │
+│  │     │ │     │                │
+│  └─────┘ └─────┘                │
+│                                  │
+├──────────────────────────────────┤
+│  BottomInputBar (fixed bottom)   │
+│  🦙  "Ask Maka to find games"   │
+│  [Send ▶]                        │
+└──────────────────────────────────┘
+```
+
+## Components Used
+
+```tsx
+import {
+  Header,
+  FeaturedCard,
+  HotGrid,
+  WaterfallGrid,
+  Badge,
+  BottomInputBar,
+  ScenarioCard,
+} from '@breakergames/design-system';
+```
+
+## Sections
+
+### 1. Header
+- Fixed top, `backdrop-filter: blur(12px)`, semi-transparent dark background
+- Left: Logo text "makabaka"
+- Center: 3 tab buttons — "Recommend" (active, purple underline), "Community", "Messages"
+- Right: User Avatar (gradient circle with initial letter) or "Login" button
+
+### 2. Featured Card (Hero)
+- Full-width `FeaturedCard` component
+- Aspect ratio 4:5 on mobile, 3:1 on desktop
+- Cover image with bottom gradient overlay (transparent → dark)
+- `Badge` component in top-left (e.g., "Staff Pick", "Hot")
+- Title overlay at bottom with play count + like count
+- Click opens game detail
+
+### 3. Hot Games Grid
+- Section label: "🔥 Hot Games" or "🔥 热门游戏"
+- `HotGrid` component: 2-column layout
+- Left column: 1 large card (aspect 3:4)
+- Right column: 2 stacked smaller cards
+- Each card is a `ScenarioCard` with cover image, title, stats
+
+### 4. New Games Section
+- Section label: "✨ New Games" or "✨ 新鲜出炉"
+- Same layout as Hot Games (HotGrid)
+- Shows recently created scenarios
+
+### 5. Waterfall Grid (More Recommendations)
+- Section label: "📋 More" or "📋 更多推荐"
+- `WaterfallGrid` component: 2-column masonry layout
+- Right column offset 24px downward
+- Cards have varying aspect ratios (3:4, 1:1, 4:5)
+- Infinite scroll pattern
+
+### 6. Bottom Input Bar
+- Fixed to bottom of viewport
+- Frosted glass background (`backdrop-filter: blur(12px)`)
+- Left: Llama emoji icon 🦙
+- Center: Placeholder text "Ask Maka to find games..."
+- Right: Purple circular send button
+- Tapping opens the MakaAI chat sheet
+
+## Design Notes
+- Background: `var(--maka-bg-dark)` (#1b2838)
+- Cards animate in with slam-in effect on first load
+- All cards show hover glow effect (purple border)
+- Mobile: full viewport width, no horizontal padding on cards
+- Desktop: max-width 672px centered (`lg:max-w-2xl lg:mx-auto`)

package/guidelines/pages/game-detail.md

@@ -0,0 +1,115 @@
+# Game Detail Page / Modal
+
+Shows full game information. Appears as a centered modal overlay on desktop, or a full-screen sheet on mobile.
+
+## Layout
+
+```
+┌──────────────────────────────────┐
+│  ╔══════════════════════════════╗│
+│  ║  [X] Close                   ║│
+│  ║                              ║│
+│  ║  ┌────────────────────────┐  ║│
+│  ║  │   Hero Image           │  ║│
+│  ║  │   (cover, aspect 16:9) │  ║│
+│  ║  │   + gradient overlay   │  ║│
+│  ║  └────────────────────────┘  ║│
+│  ║                              ║│
+│  ║  Game Title                  ║│
+│  ║  by AuthorName               ║│
+│  ║                              ║│
+│  ║  ┌─────┬──────┬─────┬─────┐ ║│
+│  ║  │ ⭐  │ ▶    │ ❤   │ 💬  │ ║│
+│  ║  │ 4.5 │ 1.2k │ 89  │ 23  │ ║│
+│  ║  │Rate │Plays │Likes│Cmts │ ║│
+│  ║  └─────┴──────┴─────┴─────┘ ║│
+│  ║                              ║│
+│  ║  [ASG] [Adventure] [Fantasy] ║│
+│  ║   ↑ tag pills                ║│
+│  ║                              ║│
+│  ║  Description text...         ║│
+│  ║  Multi-line game description ║│
+│  ║                              ║│
+│  ║  💬 Comments                  ║│
+│  ║  ┌────────────────────────┐  ║│
+│  ║  │ User1: Great game!     │  ║│
+│  ║  │ User2: Love the story  │  ║│
+│  ║  └────────────────────────┘  ║│
+│  ║                              ║│
+│  ║  ┌────────────────────────┐  ║│
+│  ║  │ [▶ Play Now]  [❤ Like] │  ║│
+│  ║  └────────────────────────┘  ║│
+│  ╚══════════════════════════════╝│
+└──────────────────────────────────┘
+```
+
+## Components Used
+
+```tsx
+import {
+  Modal,
+  Button,
+  Badge,
+  LikeButton,
+  Avatar,
+  ChatBubble,
+} from '@breakergames/design-system';
+```
+
+## Sections
+
+### 1. Modal Container
+- `Modal` component with dark overlay backdrop (`rgba(0,0,0,0.6)`)
+- Close button (X) in top-right corner
+- Max-width: 640px on desktop, full-screen on mobile
+- Scrollable content area
+
+### 2. Hero Image
+- Cover image with aspect-ratio 16:9
+- Bottom gradient overlay (transparent → modal background)
+- `Badge` component overlay showing game type (e.g., "Hot", "Staff Pick")
+- Fallback: gradient placeholder if no cover image
+
+### 3. Title & Author
+- Game title: large text (text-2xl, bold, display font)
+- Author: "by {authorName}" with `Avatar` (small) inline
+- Template type indicator: "Multiplayer" or "Singleplayer" subtle text
+
+### 4. Stats Row (4 columns)
+- 4 stat columns evenly spaced
+- Each column: icon + number + label (stacked vertically, centered)
+  - ⭐ Rating (yellow)
+  - ▶ Plays (purple)
+  - ❤ Likes (pink)
+  - 💬 Comments (blue)
+- Divided by subtle vertical borders
+
+### 5. Tag Pills
+- Horizontal scrollable row of pill-shaped tags
+- Tags include: template type, genre, themes
+- Pill style: `--maka-bg-hover` background, rounded-full, small text
+
+### 6. Description
+- Multi-line text with `--maka-text-secondary` color
+- Max 3 lines collapsed, "Read more" to expand
+
+### 7. Comments Section
+- Section title: "💬 Comments" + count
+- List of comment entries: Avatar + username + text + timestamp
+- Empty state: "No comments yet"
+
+### 8. Action Bar (fixed bottom of modal)
+- Frosted glass background
+- Primary action: "▶ Play Now" `Button` (primary, large)
+  - Multiplayer games: "Create Room" + "Join Room" buttons
+  - Singleplayer games: Single "Play" button
+- Secondary action: `LikeButton` (heart toggle with count)
+- Dashboard variant adds: "Publish/Unpublish" + "Delete" + "Upgrade" buttons
+
+## Design Notes
+- Modal backdrop: `rgba(0,0,0,0.6)` with `backdrop-filter: blur(4px)`
+- Modal surface: `var(--maka-bg-card)` (#1e2a3a)
+- On mobile: modal becomes full-screen bottom sheet
+- Stats use colored icons matching their semantic meaning
+- Action bar sticks to bottom of modal, always visible
+- Smooth slide-up animation on open

package/guidelines/pages/games-list.md

@@ -0,0 +1,103 @@
+# Games List Page
+
+Community game gallery showing all published game scenarios in a grid layout.
+
+## Layout
+
+```
+┌──────────────────────────────────┐
+│  Header (fixed, frosted glass)   │
+├──────────────────────────────────┤
+│                                  │
+│  Home / Custom Games             │
+│  ↑ breadcrumb                    │
+│                                  │
+│  ═══════════════════════════════ │
+│  Custom Games Gallery            │
+│  Explore community-created       │
+│  game scenarios                  │
+│  ═══════════════════════════════ │
+│                                  │
+│  Games Gallery                   │
+│  Browse all scenarios            │
+│                                  │
+│  ┌─────┐ ┌─────┐ ┌─────┐ ┌────┐│
+│  │     │ │     │ │     │ │    ││
+│  │Card │ │Card │ │Card │ │Card││
+│  │     │ │     │ │     │ │    ││
+│  └─────┘ └─────┘ └─────┘ └────┘│
+│  ┌─────┐ ┌─────┐ ┌─────┐ ┌────┐│
+│  │     │ │     │ │     │ │    ││
+│  │Card │ │Card │ │Card │ │Card││
+│  │     │ │     │ │     │ │    ││
+│  └─────┘ └─────┘ └─────┘ └────┘│
+│  ┌─────┐ ┌─────┐ ┌─────┐ ┌────┐│
+│  │     │ │     │ │     │ │    ││
+│  │Card │ │Card │ │Card │ │Card││
+│  └─────┘ └─────┘ └─────┘ └────┘│
+│                                  │
+│  ─────────────────────────────── │
+│     Created with makabaka.io     │
+│  ─────────────────────────────── │
+│                                  │
+└──────────────────────────────────┘
+```
+
+## Components Used
+
+```tsx
+import {
+  Header,
+  ScenarioCard,
+  GameGrid,
+  Badge,
+} from '@breakergames/design-system';
+```
+
+## Sections
+
+### 1. Header
+- Fixed top, frosted glass, same as all pages
+
+### 2. Breadcrumb
+- Small navigation: "Home" (link, cyan) → "/" → "Custom Games" (current, muted)
+- Below header, left-aligned
+- Font size: small, `var(--maka-text-muted)` color
+
+### 3. Hero Section
+- Top and bottom border separators (`var(--maka-border-subtle)`)
+- Title: "Custom Games Gallery" / "自定义游戏库" — text-3xl, display font, bold
+- Subtitle: "Explore community-created custom game scenarios" — `var(--maka-text-secondary)`
+- Vertical padding: 48px
+- Horizontal padding: 24px
+- Max-width container centered
+
+### 4. Gallery Grid
+- Section header:
+  - Title: "Games Gallery" / "游戏列表" — text-2xl
+  - Subtitle: "Browse all scenarios" / "浏览所有场景"
+- `GameGrid` component with responsive columns:
+  - Mobile: 2 columns
+  - Tablet: 3 columns
+  - Desktop: 4 columns
+- Each cell is a `ScenarioCard`:
+  - Cover image with gradient overlay
+  - `Badge` in top-left (template type or status)
+  - Title at bottom
+  - Play count + like count
+  - Aspect ratio: 3:4
+- Click opens game detail modal
+
+### 5. Footer
+- Top border separator
+- Centered tagline: "Created with makabaka.io" — small, muted
+- Bottom padding: 32px
+
+## Design Notes
+- Background: `var(--maka-bg-dark)` (#1b2838)
+- Grid gap: 16px
+- Cards have hover glow effect (purple border)
+- Responsive: 2 cols mobile → 3 cols tablet → 4 cols desktop
+- Max-width container: 1200px on large screens
+- All cards are same height within a row (uniform grid, not masonry)
+- Loading state: skeleton cards or centered spinner

package/guidelines/pages/login.md

@@ -0,0 +1,127 @@
+# Login Page
+
+User authentication entry point. Clean centered card design.
+
+## Layout
+
+```
+┌──────────────────────────────────┐
+│  Header (fixed, frosted glass)   │
+├──────────────────────────────────┤
+│                                  │
+│                                  │
+│         Welcome Back             │
+│                                  │
+│    ╔══════════════════════════╗   │
+│    ║                          ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │ 🔵 Continue with   │  ║   │
+│    ║  │    Google           │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │ 🟢 Continue with   │  ║   │
+│    ║  │    WeChat           │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  ──── or continue ────   ║   │
+│    ║       with email         ║   │
+│    ║                          ║   │
+│    ║  Email                   ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │ your@email.com     │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  Password                ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │ ••••••••           │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │   Sign In          │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  Don't have an account?  ║   │
+│    ║  Sign up                 ║   │
+│    ║                          ║   │
+│    ║  ──────── or ────────    ║   │
+│    ║                          ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │  Continue as Guest │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║  No registration needed  ║   │
+│    ║                          ║   │
+│    ╚══════════════════════════╝   │
+│                                  │
+└──────────────────────────────────┘
+```
+
+## Components Used
+
+```tsx
+import {
+  Header,
+  Button,
+  Input,
+  Card,
+} from '@breakergames/design-system';
+```
+
+## Sections
+
+### 1. Header
+- Fixed top, frosted glass, same as all pages
+- No tabs highlighted (auth pages are standalone)
+
+### 2. Page Title
+- "Welcome Back" / "欢迎回来" — centered, large (text-3xl), bold, display font
+- Below header with comfortable spacing (py-16)
+
+### 3. Login Card
+- `Card` component centered, max-width 448px (`max-w-md`)
+- Surface color: `var(--maka-bg-card)`
+- Padding: 24px–32px
+- Rounded corners: `var(--maka-radius-xl)` (16px)
+
+### 4. OAuth Buttons
+- Two full-width `Button` components (secondary variant)
+- Google button: Google icon + "Continue with Google"
+- WeChat button: WeChat icon + "Continue with WeChat" / "微信登录"
+- Gap: 12px between buttons
+
+### 5. Divider
+- Horizontal line with centered text: "or continue with email" / "或使用邮箱"
+- Line: `var(--maka-border-subtle)` color
+- Text: `var(--maka-text-muted)` color, small size
+
+### 6. Email/Password Form
+- Two `Input` components stacked:
+  - Email: type="email", label="Email" / "邮箱", placeholder
+  - Password: type="password", label="Password" / "密码", placeholder
+- Gap: 16px between inputs
+- Error message area: red background card if login fails
+
+### 7. Submit Button
+- Full-width `Button` (primary variant, large)
+- Text: "Sign In" / "登录"
+- Loading state: shows spinner when submitting
+- Margin-top: 24px
+
+### 8. Sign Up Link
+- Centered text: "Don't have an account?" + purple link "Sign up"
+- Link navigates to `/register`
+- Margin-top: 16px
+
+### 9. Guest Login Section
+- Divider with "or" text
+- Full-width `Button` (ghost variant)
+- Text: "Continue as Guest" / "游客登录"
+- Helper text below: "No registration needed" / "无需注册" — small, muted
+- Loading state on button
+
+## Design Notes
+- Background: `var(--maka-bg-dark)` (#1b2838)
+- Card has subtle border: `var(--maka-border-subtle)`
+- Focus states on inputs: purple border glow
+- Error messages appear as red-tinted alert box above the form or below inputs
+- Responsive: card takes full width on mobile with horizontal padding
+- All buttons have hover and active states

package/guidelines/pages/register.md

@@ -0,0 +1,137 @@
+# Register Page
+
+Account creation page with email verification flow. Similar layout to Login but with more fields.
+
+## Layout
+
+```
+┌──────────────────────────────────┐
+│  Header (fixed, frosted glass)   │
+├──────────────────────────────────┤
+│                                  │
+│        Create Account            │
+│                                  │
+│    ╔══════════════════════════╗   │
+│    ║                          ║   │
+│    ║  [🔵 Google] [🟢 WeChat] ║   │
+│    ║                          ║   │
+│    ║  ── or register with ──  ║   │
+│    ║        email             ║   │
+│    ║                          ║   │
+│    ║  Display Name            ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │ Your nickname      │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  Email                   ║   │
+│    ║  ┌──────────────┬─────┐  ║   │
+│    ║  │ your@email   │Send │  ║   │
+│    ║  │              │Code │  ║   │
+│    ║  └──────────────┴─────┘  ║   │
+│    ║                          ║   │
+│    ║  Verification Code       ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │    1 2 3 4 5 6     │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║  ✅ Code sent to email   ║   │
+│    ║                          ║   │
+│    ║  Password                ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │ ••••••••           │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  Confirm Password        ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │ ••••••••           │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  ┌────────────────────┐  ║   │
+│    ║  │  Create Account    │  ║   │
+│    ║  └────────────────────┘  ║   │
+│    ║                          ║   │
+│    ║  Already have an account?║   │
+│    ║  Sign in                 ║   │
+│    ║                          ║   │
+│    ╚══════════════════════════╝   │
+│                                  │
+└──────────────────────────────────┘
+```
+
+## Components Used
+
+```tsx
+import {
+  Header,
+  Button,
+  Input,
+  Card,
+} from '@breakergames/design-system';
+```
+
+## Sections
+
+### 1. Header
+- Same as all pages: fixed, frosted glass
+
+### 2. Page Title
+- "Create Account" / "创建账号" — centered, text-3xl, bold
+
+### 3. Register Card
+- `Card` component centered, max-width 448px
+- Same styling as login card
+
+### 4. OAuth Buttons
+- Same as login: Google + WeChat buttons (secondary variant)
+
+### 5. Divider
+- "or register with email" / "或使用邮箱注册"
+
+### 6. Registration Form (5 fields)
+
+**Display Name**
+- `Input` with label "Display Name" / "昵称"
+- minLength: 2 characters
+- Placeholder: "Your nickname"
+
+**Email + Send Code**
+- `Input` with label "Email" / "邮箱"
+- Inline `Button` (small, secondary) on the right: "Send Code" / "发送验证码"
+- Send Code button has 60-second countdown timer after click
+- Button disabled until valid email is entered
+
+**Verification Code**
+- `Input` with label "Verification Code" / "验证码"
+- Monospace font, center-aligned, letter-spacing wide
+- 6 digits
+- Success text below in green: "✅ Code sent to your email" when code is sent
+
+**Password**
+- `Input` type="password", label "Password" / "密码"
+- minLength: 6 characters
+
+**Confirm Password**
+- `Input` type="password", label "Confirm Password" / "确认密码"
+- Must match password field
+- Error shown if mismatch
+
+### 7. Submit Button
+- Full-width `Button` (primary variant, large)
+- Text: "Create Account" / "创建账号"
+- Loading state with spinner
+- Disabled until all fields valid
+
+### 8. Sign In Link
+- "Already have an account?" + purple link "Sign in"
+- Links to `/login`
+
+### 9. Error Display
+- Red-tinted alert box for validation or API errors
+- Shows above the form or below the submit button
+
+## Design Notes
+- Same dark background and card style as login page
+- Email + Send Code button is an inline layout (input takes remaining space, button fixed width)
+- Verification code input uses monospace font with wide letter-spacing for OTP feel
+- Send Code countdown shows remaining seconds: "Resend (45s)"
+- All validation happens inline with colored border/text on individual inputs
+- Password strength is not shown (simple minLength validation only)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breakergames/design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",