perf: 优化合图功能

新增 ZIP 打包导出、精灵选择高亮、点击拾取等交互功能

- 新增 JSZip 依赖，支持一键打包下载图集图片和元数据文件
- CanvasPreview 新增精灵选择功能，支持点击/多选选择，带脉冲动画高亮效果
- 新增图片缓存机制，优化重绘性能
- FileListPanel 新增选中项自动滚动到可视区域
- 优化防抖延迟和加载状态视觉效果

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

.codebuddy/plans/texture-atlas-browser-upgrade_c5a9c6ec.md

@@ -0,0 +1,310 @@
+---
+name: texture-atlas-browser-upgrade
+overview: 重构合图工具页面，实现三栏布局（左侧文件列表、中间Canvas实时预览、右侧参数配置），支持文件夹拖拽上传，使用 Web Worker 在浏览器端完成合图处理，并新增精灵动画预览弹窗功能。
+design:
+  architecture:
+    framework: react
+  styleKeywords:
+    - Professional Tool
+    - Dark Theme
+    - Three-Column Layout
+    - Glassmorphism Panels
+    - Minimal Borders
+  fontSystem:
+    fontFamily: PingFang SC
+    heading:
+      size: 18px
+      weight: 600
+    subheading:
+      size: 14px
+      weight: 500
+    body:
+      size: 13px
+      weight: 400
+  colorSystem:
+    primary:
+      - "#3B82F6"
+      - "#2563EB"
+      - "#1D4ED8"
+    background:
+      - "#0A0A0B"
+      - "#18181B"
+      - "#27272A"
+    text:
+      - "#FAFAFA"
+      - "#A1A1AA"
+      - "#71717A"
+    functional:
+      - "#22C55E"
+      - "#EF4444"
+      - "#F59E0B"
+todos:
+  - id: atlas-store
+    content: 创建atlasStore状态管理，定义精灵列表、配置、结果等状态及actions
+    status: completed
+  - id: browser-packer
+    content: 使用 [skill:frontend-patterns] 迁移打包算法到浏览器端，创建atlas-packer.ts实现MaxRects和Shelf算法
+    status: completed
+  - id: web-worker
+    content: 创建atlas-worker.ts，实现Web Worker打包处理和消息通信协议
+    status: completed
+    dependencies:
+      - browser-packer
+  - id: file-list-panel
+    content: 使用 [skill:frontend-design] 开发左侧FileListPanel组件，支持文件夹拖拽上传和文件列表展示
+    status: completed
+    dependencies:
+      - atlas-store
+  - id: canvas-preview
+    content: 使用 [skill:frontend-design] 开发中间CanvasPreview组件，实现实时渲染、缩放平移功能
+    status: completed
+    dependencies:
+      - atlas-store
+      - web-worker
+  - id: animation-dialog
+    content: 使用 [skill:frontend-design] 开发AnimationPreviewDialog组件，实现精灵动画帧播放和帧率控制
+    status: completed
+    dependencies:
+      - canvas-preview
+  - id: page-integration
+    content: 使用 [skill:vercel-react-best-practices] 重构texture-atlas/page.tsx，整合三栏布局和所有功能组件
+    status: completed
+    dependencies:
+      - file-list-panel
+      - canvas-preview
+      - animation-dialog
+---
+
+## 产品概述
+
+重构合图工具页面，从传统的两栏布局升级为三栏专业工作台布局。左侧文件列表面板显示上传的精灵图文件，中间Canvas实时预览合图结果，右侧参数配置面板调整合图参数。核心目标是将服务端处理迁移到浏览器端，使用 Web Worker 实现无阻塞的合图算法处理。
+
+## 核心功能
+
+1. **三栏工作台布局**：左侧文件树/列表、中间Canvas预览、右侧参数配置，支持面板宽度调整
+2. **文件夹拖拽上传**：支持 webkitdirectory 单层文件夹上传，图片平铺显示并按文件名排序
+3. **实时Canvas预览**：参数变更时自动触发合图计算，Canvas实时渲染结果，支持缩放和平移
+4. **Web Worker浏览器端处理**：将 MaxRects 和 Shelf 打包算法迁移到 Web Worker，实现非阻塞处理
+5. **精灵动画预览弹窗**：支持选择精灵帧按顺序播放动画，可调节帧率(FPS)，循环播放
+6. **导出下载**：支持导出合图图片和元数据文件(Cocos2d plist、Cocos Creator JSON、通用JSON)
+
+## 技术栈
+
+- 框架：Next.js 15 + React 19 + TypeScript
+- 样式：Tailwind CSS + CSS Variables
+- UI组件：Radix UI (Dialog已有) + Framer Motion
+- 状态管理：Zustand (扩展现有 uploadStore)
+- 国际化：现有 i18n 系统 (en.json / zh.json)
+- 图像处理：Canvas API + Web Worker + OffscreenCanvas
+
+## 技术架构
+
+### 系统架构
+
+```mermaid
+graph TB
+    subgraph UI Layer
+        A[FileListPanel] --> B[AtlasStore]
+        C[CanvasPreview] --> B
+        D[ConfigPanel] --> B
+        E[AnimationDialog] --> B
+    end
+    
+    subgraph Processing Layer
+        B --> F[Web Worker]
+        F --> G[MaxRects Algorithm]
+        F --> H[Shelf Algorithm]
+        F --> I[Canvas Composite]
+    end
+    
+    subgraph Export Layer
+        B --> J[Plist Exporter]
+        B --> K[JSON Exporter]
+        B --> L[Image Download]
+    end
+```
+
+### 模块划分
+
+- **UI模块**：三栏布局组件、文件列表面板、Canvas预览组件、动画预览弹窗
+- **状态模块**：扩展现有Zustand store，管理文件列表、合图配置、处理状态
+- **Worker模块**：浏览器端打包算法实现，处理图片合成
+- **导出模块**：复用现有导出格式逻辑，适配浏览器端
+
+### 数据流
+
+```mermaid
+flowchart LR
+    A[文件夹拖拽上传] --> B[解析图片文件]
+    B --> C[加载为ImageBitmap]
+    C --> D[存入Store]
+    D --> E[触发Worker处理]
+    E --> F[执行打包算法]
+    F --> G[返回布局数据]
+    G --> H[Canvas渲染预览]
+    H --> I[用户调整参数]
+    I --> E
+```
+
+## 实现细节
+
+### 核心目录结构
+
+```
+src/
+├── app/(dashboard)/tools/texture-atlas/
+│   └── page.tsx                    # 重构：三栏布局主页面
+├── components/tools/
+│   ├── atlas/
+│   │   ├── FileListPanel.tsx       # 新增：左侧文件列表面板
+│   │   ├── CanvasPreview.tsx       # 新增：中间Canvas预览组件
+│   │   ├── AtlasConfigPanel.tsx    # 新增：右侧配置面板(基于ConfigPanel)
+│   │   └── AnimationPreviewDialog.tsx # 新增：动画预览弹窗
+│   └── FileUploader.tsx            # 修改：支持文件夹上传
+├── lib/
+│   ├── atlas-worker.ts             # 新增：Web Worker主文件
+│   ├── atlas-packer.ts             # 新增：浏览器端打包算法(从texture-atlas.ts迁移)
+│   └── atlas-exporter.ts           # 新增：导出格式生成器
+├── store/
+│   └── atlasStore.ts               # 新增：合图专用状态管理
+└── types/
+    └── index.ts                    # 修改：添加浏览器端类型定义
+```
+
+### 关键代码结构
+
+**浏览器端精灵类型定义**：用于存储加载的图片及其元信息，使用 ImageBitmap 代替 Buffer 以适配浏览器环境。
+
+```typescript
+// 浏览器端精灵类型
+interface BrowserSprite {
+  id: string;
+  name: string;
+  width: number;
+  height: number;
+  image: ImageBitmap;
+}
+
+// 合图Store状态
+interface AtlasState {
+  sprites: BrowserSprite[];
+  config: TextureAtlasConfig;
+  result: AtlasResult | null;
+  isProcessing: boolean;
+  previewScale: number;
+}
+```
+
+**Web Worker消息协议**：定义Worker与主线程之间的通信格式，支持打包计算和进度回调。
+
+```typescript
+// Worker消息协议
+interface WorkerMessage {
+  type: 'pack' | 'cancel';
+  sprites: { id: string; width: number; height: number }[];
+  config: TextureAtlasConfig;
+}
+
+interface WorkerResult {
+  type: 'result' | 'progress' | 'error';
+  placements?: Map<string, AtlasRect>;
+  progress?: number;
+  error?: string;
+}
+```
+
+### 技术实现要点
+
+1. **文件夹上传**
+
+- 使用 `webkitdirectory` 属性支持文件夹选择
+- 过滤非图片文件，按文件名自然排序
+- 使用 `createImageBitmap` 异步加载图片
+
+2. **Web Worker处理**
+
+- 将 MaxRects 和 Shelf 算法迁移到 Worker
+- 仅传递尺寸数据到 Worker，图片保留在主线程
+- Worker 返回布局坐标，主线程执行 Canvas 合成
+
+3. **Canvas实时预览**
+
+- 使用 Canvas 2D Context 渲染合图结果
+- 支持鼠标滚轮缩放和拖拽平移
+- 配置变更触发防抖重新计算
+
+4. **动画预览**
+
+- 基于现有 Dialog 组件实现弹窗
+- 使用 requestAnimationFrame 控制帧率
+- 从合图结果中裁剪精灵帧序列播放
+
+### 性能优化
+
+- 使用防抖处理配置变更，避免频繁重计算
+- Worker 处理打包算法，不阻塞UI线程
+- ImageBitmap 高效图片加载和渲染
+- Canvas缓存合图结果，缩放时仅变换视图
+
+## 设计风格
+
+采用专业工具型界面设计，三栏工作台布局参考主流图形编辑软件(如TexturePacker、Figma)。整体风格延续项目现有的暗色主题设计，使用玻璃态面板分隔各功能区域。
+
+## 页面规划
+
+### 合图工作台页面 (单页面三栏布局)
+
+**整体布局**
+
+- 三栏横向布局，左中右比例约 240px : auto : 320px
+- 面板之间使用微妙的边框分隔，支持视觉层次区分
+- 中间预览区域占据主要空间，深色背景突出Canvas
+
+**左侧文件列表面板**
+
+- 顶部：文件夹名称显示、文件数量统计、清空按钮
+- 中部：文件列表区域，每项显示缩略图、文件名、尺寸信息
+- 底部：拖拽上传提示区域，支持点击选择文件夹
+- 支持列表项hover高亮，点击选中状态
+
+**中间Canvas预览区域**
+
+- 顶部工具栏：缩放比例显示、适应窗口按钮、动画预览按钮
+- 主体：深色棋盘格背景，Canvas居中显示合图结果
+- 支持鼠标滚轮缩放(10%-400%)、拖拽平移
+- 空状态：显示拖拽上传引导图标和文字
+
+**右侧参数配置面板**
+
+- 复用现有ConfigPanel组件样式
+- 分组展示：尺寸设置、布局设置、输出设置
+- 底部：生成按钮、下载按钮组
+
+**动画预览弹窗**
+
+- 居中弹窗，尺寸 640x480
+- 顶部：标题、关闭按钮
+- 中部：Canvas播放区域，深色背景
+- 底部：播放/暂停按钮、帧率滑块(1-60fps)、当前帧/总帧数显示
+
+## Agent Extensions
+
+### Skill
+
+- **frontend-design**
+- 用途：设计三栏工作台布局、Canvas预览区域、动画预览弹窗等UI界面
+- 预期结果：生成专业、美观的合图工具界面，符合现有项目设计风格
+
+- **frontend-patterns**
+- 用途：实现Web Worker通信、Canvas渲染、状态管理等前端模式
+- 预期结果：代码结构清晰，性能优化到位，符合React最佳实践
+
+- **vercel-react-best-practices**
+- 用途：优化React组件性能，处理大量图片文件时的渲染优化
+- 预期结果：组件渲染高效，避免不必要的重渲染
+
+### SubAgent
+
+- **code-explorer**
+- 用途：在实现过程中探索现有组件复用、类型定义、国际化键值等
+- 预期结果：充分复用现有代码，保持项目一致性

CLAUDE.md

@@ -0,0 +1,52 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start dev server with Turbopack |
+| `npm run build` | Production build |
+| `npm run start` | Run production server |
+| `npm run lint` | ESLint check |
+| `npm run type-check` | TypeScript type checking without emit |
+| `npm run format` | Format code with Prettier |
+
+## Architecture
+
+### Tech Stack
+- **Framework**: Next.js 15 with App Router, React 19
+- **State**: Zustand for client state
+- **Styling**: Tailwind CSS with HSL CSS variables (dark mode by default)
+- **UI Components**: Custom components built on Radix UI primitives
+- **Animations**: Framer Motion
+- **Form Validation**: Zod
+- **Media Processing**: Sharp (images), FFmpeg (video/audio)
+
+### Route Groups
+- `(auth)` - Authentication routes (login, register)
+- `(dashboard)` - Dashboard routes with shared Sidebar layout
+
+### Tool Pages Pattern
+Each tool (image-compress, video-frames, audio-compress) follows a consistent pattern:
+1. `FileUploader` - Drag-drop file input using react-dropzone
+2. `ConfigPanel` - Tool-specific configuration options
+3. `ProgressBar` - Processing status indicator
+4. `ResultPreview` - Display processed files
+5. State managed via `useUploadStore` Zustand store
+
+### State Management
+- `store/uploadStore.ts` - File list, processing status, progress tracking
+- `store/authStore.ts` - User authentication state
+
+### Styling Convention
+Use `cn()` utility from `lib/utils.ts` for Tailwind class merging. Theme colors are CSS variables in `app/globals.css` accessed via HSL: `hsl(var(--primary))`.
+
+### Type Definitions
+All shared types in `types/index.ts` including file types, processing configs, API responses.
+
+### Development Phases
+- Current (Phase 1-4): Basic tools with mock API implementations
+- Phase 5: AI services integration (Replicate, OpenAI)
+- Phase 6: Authentication, database (PostgreSQL), payment processing (Stripe), cloud storage (Cloudflare R2)

CODEBUDDY.md

@@ -0,0 +1,70 @@
+# CODEBUDDY.md This file provides guidance to CodeBuddy when working with code in this repository.
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start dev server with Turbopack (fast refresh) |
+| `npm run build` | Production build |
+| `npm run start` | Run production server |
+| `npm run lint` | ESLint check |
+| `npm run type-check` | TypeScript type checking without emit |
+| `npm run format` | Format code with Prettier |
+
+## Architecture
+
+### Tech Stack
+- **Framework**: Next.js 15 with App Router, React 19
+- **State**: Zustand for client state
+- **Styling**: Tailwind CSS with HSL CSS variables (dark mode by default)
+- **UI Components**: Custom components built on Radix UI primitives
+- **Animations**: Framer Motion
+- **Form Validation**: Zod
+- **Media Processing**: Sharp (images), FFmpeg (video/audio)
+
+### Directory Structure
+
+```
+src/
+├── app/                    # Next.js App Router
+│   ├── (auth)/            # Auth routes group (login, register)
+│   ├── (dashboard)/       # Dashboard routes with Sidebar layout
+│   │   ├── tools/         # Tool pages (image-compress, video-frames, audio-compress)
+│   │   └── layout.tsx     # Dashboard layout with Sidebar
+│   ├── api/               # API routes
+│   │   ├── upload/        # File upload endpoint
+│   │   └── process/       # Processing endpoints per tool type
+│   ├── globals.css        # Global styles with CSS variables
+│   └── layout.tsx         # Root layout (Header + Footer)
+├── components/
+│   ├── ui/                # Base UI primitives (button, card, input, etc.)
+│   ├── tools/             # Tool-specific components (FileUploader, ConfigPanel, ProgressBar, ResultPreview)
+│   └── layout/            # Layout components (Header, Footer, Sidebar)
+├── lib/
+│   ├── api.ts             # API client functions
+│   └── utils.ts           # Utility functions (cn, formatFileSize, etc.)
+├── store/
+│   ├── authStore.ts       # Auth state
+│   └── uploadStore.ts     # File upload and processing state
+└── types/
+    └── index.ts           # TypeScript types (UploadedFile, ProcessedFile, configs, etc.)
+```
+
+### Key Patterns
+
+**Route Groups**: Uses `(auth)` and `(dashboard)` route groups. Dashboard routes share a layout with `Sidebar` component.
+
+**Tool Pages Pattern**: Each tool (image-compress, video-frames, audio-compress) follows the same pattern:
+1. Uses `FileUploader` for drag-drop file input
+2. Uses `ConfigPanel` for tool-specific configuration options
+3. Uses `ProgressBar` to show processing status
+4. Uses `ResultPreview` to display processed files
+5. State managed via `useUploadStore` Zustand store
+
+**API Routes**: API routes under `app/api/` use Node.js runtime. Each processing endpoint validates input and returns JSON responses. Currently mock implementations - production would use Sharp/FFmpeg and cloud storage.
+
+**State Management**: Zustand stores in `store/` directory. `uploadStore` manages file list, processing status and progress. `authStore` manages user authentication state.
+
+**Styling**: Uses `cn()` utility from `lib/utils.ts` for Tailwind class merging. Theme colors defined as CSS variables in `globals.css`. Component styling uses HSL color functions like `hsl(var(--primary))`.
+
+**Type Definitions**: All shared types in `types/index.ts`. Includes file types, processing configs, API responses, and user types.

package.json

@@ -8,19 +8,25 @@
     "start": "next start",
     "lint": "next lint",
     "type-check": "tsc --noEmit",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "deploy": "bash scripts/deploy.sh"
   },
   "dependencies": {
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-query": "^5.62.11",
+    "@types/archiver": "^7.0.0",
+    "archiver": "^7.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "ffmpeg-static": "^5.2.0",
     "framer-motion": "^11.15.0",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.468.0",
     "next": "^15.1.6",
     "react": "^19.0.0",
@@ -28,11 +34,13 @@
     "react-dropzone": "^14.3.5",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.6.0",
+    "upng-js": "^2.1.0",
     "zod": "^3.24.1",
     "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
+    "@types/jszip": "^3.4.0",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",

scripts/deploy.sh

@@ -0,0 +1,112 @@
+#!/bin/bash
+
+# 部署配置
+SERVER_USER="root"
+SERVER_HOST="129.204.155.94"
+SERVER_PATH="/usr/local/web/mini-game-ai"
+PM2_APP_NAME="mini-game-ai"
+
+# 颜色输出
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m'
+
+echo_info() { echo -e "${GREEN}[INFO]${NC} $1"; }
+echo_warn() { echo -e "${YELLOW}[WARN]${NC} $1"; }
+echo_error() { echo -e "${RED}[ERROR]${NC} $1"; }
+
+# 检查 SSH 连接
+echo_info "检查服务器连接..."
+if ! ssh -o ConnectTimeout=5 ${SERVER_USER}@${SERVER_HOST} "echo '连接成功'" > /dev/null 2>&1; then
+    echo_error "无法连接到服务器 ${SERVER_HOST}"
+    echo_warn "请确保："
+    echo_warn "  1. 服务器地址正确"
+    echo_warn "  2. 已配置 SSH 密钥认证或密码"
+    exit 1
+fi
+
+# 本地构建
+echo_info "开始本地构建..."
+npm run build
+if [ $? -ne 0 ]; then
+    echo_error "构建失败，部署终止"
+    exit 1
+fi
+echo_info "构建完成"
+
+# 创建服务器目录
+echo_info "准备服务器目录..."
+ssh ${SERVER_USER}@${SERVER_HOST} "mkdir -p ${SERVER_PATH}"
+
+# 同步文件到服务器
+echo_info "上传文件到服务器 ${SERVER_HOST}:${SERVER_PATH}"
+rsync -avz --delete \
+  --exclude 'node_modules' \
+  --exclude '.git' \
+  --exclude 'public/uploads' \
+  --exclude '__pycache__' \
+  --exclude '*.pyc' \
+  --exclude '.DS_Store' \
+  --exclude '*.log' \
+  ./ ${SERVER_USER}@${SERVER_HOST}:${SERVER_PATH}/
+
+if [ $? -ne 0 ]; then
+    echo_error "文件上传失败"
+    exit 1
+fi
+echo_info "文件上传完成"
+
+# 在服务器上安装依赖并重启服务
+echo_info "服务器部署操作..."
+ssh ${SERVER_USER}@${SERVER_HOST} "bash -l" << 'ENDSSH'
+export PATH="$HOME/.nvm/versions/node/v22.17.1/bin:$PATH"
+cd /usr/local/web/mini-game-ai
+
+# 安装依赖
+echo "安装依赖..."
+npm config set registry https://registry.npmmirror.com
+npm install --production --no-audit --no-fund
+
+# 检查 PM2 是否安装
+if ! command -v pm2 &> /dev/null; then
+  echo "安装 PM2..."
+  npm install -g pm2
+fi
+
+# 停止旧服务（如果存在）
+if pm2 describe mini-game-ai &> /dev/null; then
+  echo "停止旧服务..."
+  pm2 stop mini-game-ai
+  pm2 delete mini-game-ai
+fi
+
+# 启动新服务
+echo "启动服务（端口 3003）..."
+PORT=3003 pm2 start npm --name mini-game-ai -- start
+
+# 保存 PM2 配置
+pm2 save --force
+
+# 等待服务启动并检查状态
+sleep 3
+echo "服务状态："
+pm2 status mini-game-ai
+
+# 检查服务是否在线
+if pm2 describe mini-game-ai | grep -q "online"; then
+  echo "✓ 服务启动成功！"
+else
+  echo "✗ 服务启动失败，查看日志："
+  pm2 logs mini-game-ai --lines 20 --nostream
+  exit 1
+fi
+ENDSSH
+
+if [ $? -eq 0 ]; then
+    echo_info "部署成功！"
+    echo_info "应用地址: http://${SERVER_HOST}:3003"
+else
+    echo_error "部署失败"
+    exit 1
+fi

src/app/(dashboard)/layout.tsx

@@ -6,10 +6,10 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex">
+    <div className="flex min-h-[calc(100vh-4rem)]">
       <Sidebar />
       <main className="flex-1 lg:ml-64">
-        <div className="min-h-[calc(100vh-4rem)]">{children}</div>
+        {children}
       </main>
     </div>
   );

src/app/(dashboard)/tools/audio-compress/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const headersList = await headers();
+  const acceptLanguage = headersList.get("accept-language") || "";
+  const lang = acceptLanguage.includes("zh") ? "zh" : "en";
+
+  const titles = {
+    en: "Audio Compression - Compress & Convert Audio Files",
+    zh: "音频压缩 - 压缩并转换音频文件",
+  };
+
+  const descriptions = {
+    en: "Compress and convert audio files to various formats including MP3, AAC, OGG, FLAC. Adjust bitrate and sample rate for optimal quality.",
+    zh: "压缩并转换音频文件为多种格式，包括 MP3、AAC、OGG、FLAC。调整比特率和采样率以获得最佳质量。",
+  };
+
+  return {
+    title: titles[lang],
+    description: descriptions[lang],
+    openGraph: {
+      title: titles[lang],
+      description: descriptions[lang],
+    },
+    twitter: {
+      title: titles[lang],
+      description: descriptions[lang],
+    },
+  };
+}
+
+export default function AudioCompressLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

src/app/(dashboard)/tools/audio-compress/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Music, Volume2 } from "lucide-react";
 import { FileUploader } from "@/components/tools/FileUploader";
@@ -10,6 +10,7 @@ import { ConfigPanel, type ConfigOption } from "@/components/tools/ConfigPanel";
 import { Button } from "@/components/ui/button";
 import { useUploadStore } from "@/store/uploadStore";
 import { generateId } from "@/lib/utils";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
 import type { UploadedFile, ProcessedFile, AudioCompressConfig } from "@/types";
 
 const audioAccept = {
@@ -23,59 +24,70 @@ const defaultConfig: AudioCompressConfig = {
   channels: 2,
 };
 
-const configOptions: ConfigOption[] = [
+function useConfigOptions(config: AudioCompressConfig, getT: (key: string) => string): ConfigOption[] {
-  {
+  return [
-    id: "bitrate",
+    {
-    type: "select",
+      id: "bitrate",
-    label: "Bitrate",
+      type: "select",
-    description: "Higher bitrate = better quality, larger file",
+      label: getT("config.audioCompression.bitrate"),
-    value: defaultConfig.bitrate,
+      description: getT("config.audioCompression.bitrateDescription"),
-    options: [
+      value: config.bitrate,
-      { label: "64 kbps", value: 64 },
+      options: [
-      { label: "128 kbps", value: 128 },
+        { label: "64 kbps", value: 64 },
-      { label: "192 kbps", value: 192 },
+        { label: "128 kbps", value: 128 },
-      { label: "256 kbps", value: 256 },
+        { label: "192 kbps", value: 192 },
-      { label: "320 kbps", value: 320 },
+        { label: "256 kbps", value: 256 },
-    ],
+        { label: "320 kbps", value: 320 },
-  },
+      ],
-  {
+    },
-    id: "format",
+    {
-    type: "select",
+      id: "format",
-    label: "Output Format",
+      type: "select",
-    description: "Target audio format",
+      label: getT("config.audioCompression.format"),
-    value: defaultConfig.format,
+      description: getT("config.audioCompression.formatDescription"),
-    options: [
+      value: config.format,
-      { label: "MP3", value: "mp3" },
+      options: [
-      { label: "AAC", value: "aac" },
+        { label: "MP3", value: "mp3" },
-      { label: "OGG", value: "ogg" },
+        { label: "AAC", value: "aac" },
-      { label: "FLAC", value: "flac" },
+        { label: "OGG", value: "ogg" },
-    ],
+        { label: "FLAC", value: "flac" },
-  },
+      ],
-  {
+    },
-    id: "sampleRate",
+    {
-    type: "select",
+      id: "sampleRate",
-    label: "Sample Rate",
+      type: "select",
-    description: "Audio sample rate in Hz",
+      label: getT("config.audioCompression.sampleRate"),
-    value: defaultConfig.sampleRate,
+      description: getT("config.audioCompression.sampleRateDescription"),
-    options: [
+      value: config.sampleRate,
-      { label: "44.1 kHz", value: 44100 },
+      options: [
-      { label: "48 kHz", value: 48000 },
+        { label: "44.1 kHz", value: 44100 },
-    ],
+        { label: "48 kHz", value: 48000 },
-  },
+      ],
-  {
+    },
-    id: "channels",
+    {
-    type: "radio",
+      id: "channels",
-    label: "Channels",
+      type: "radio",
-    description: "Audio channels",
+      label: getT("config.audioCompression.channels"),
-    value: defaultConfig.channels,
+      description: getT("config.audioCompression.channelsDescription"),
-    options: [
+      value: config.channels,
-      { label: "Stereo (2 channels)", value: 2 },
+      options: [
-      { label: "Mono (1 channel)", value: 1 },
+        { label: getT("config.audioCompression.stereo"), value: 2 },
-    ],
+        { label: getT("config.audioCompression.mono"), value: 1 },
-  },
+      ],
-];
+    },
+  ];
+}
 
 export default function AudioCompressPage() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const { t } = useTranslation();
+
+  const getT = (key: string, params?: Record<string, string | number>) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
+  };
+
   const { files, addFile, removeFile, clearFiles, processingStatus, setProcessingStatus } =
     useUploadStore();
 
@@ -98,7 +110,7 @@ export default function AudioCompressPage() {
     [addFile]
   );
 
-  const handleConfigChange = (id: string, value: any) => {
+  const handleConfigChange = (id: string, value: string | number | boolean | undefined) => {
     setConfig((prev) => ({ ...prev, [id]: value }));
   };
 
@@ -112,7 +124,7 @@ export default function AudioCompressPage() {
     setProcessingStatus({
       status: "uploading",
       progress: 0,
-      message: "Uploading audio...",
+      message: getT("processing.uploadingAudio"),
     });
 
     try {
@@ -122,14 +134,14 @@ export default function AudioCompressPage() {
         setProcessingStatus({
           status: "uploading",
           progress: i,
-          message: `Uploading... ${i}%`,
+          message: getT("processing.uploadProgress", { progress: i }),
         });
       }
 
       setProcessingStatus({
         status: "processing",
         progress: 0,
-        message: "Compressing audio...",
+        message: getT("processing.compressingAudio"),
       });
 
       // Simulate processing
@@ -138,7 +150,7 @@ export default function AudioCompressPage() {
         setProcessingStatus({
           status: "processing",
           progress: i,
-          message: `Compressing... ${i}%`,
+          message: getT("processing.compressProgress", { progress: i }),
         });
       }
 
@@ -162,14 +174,14 @@ export default function AudioCompressPage() {
       setProcessingStatus({
         status: "completed",
         progress: 100,
-        message: "Compression complete!",
+        message: getT("processing.compressionComplete"),
       });
     } catch (error) {
       setProcessingStatus({
         status: "failed",
         progress: 0,
-        message: "Compression failed",
+        message: getT("processing.compressionFailed"),
-        error: error instanceof Error ? error.message : "Unknown error",
+        error: error instanceof Error ? error.message : getT("processing.unknownError"),
       });
     }
   };
@@ -179,6 +191,7 @@ export default function AudioCompressPage() {
   };
 
   const canProcess = files.length > 0 && processingStatus.status !== "processing";
+  const configOptions = useConfigOptions(config, getT);
 
   return (
     <div className="p-6">
@@ -192,9 +205,9 @@ export default function AudioCompressPage() {
               <Music className="h-6 w-6 text-primary" />
             </div>
             <div>
-              <h1 className="text-3xl font-bold">Audio Compression</h1>
+              <h1 className="text-3xl font-bold">{getT("tools.audioCompression.title")}</h1>
               <p className="text-muted-foreground">
-                Compress and convert audio files with quality control
+                {getT("tools.audioCompression.description")}
               </p>
             </div>
           </div>
@@ -213,8 +226,8 @@ export default function AudioCompressPage() {
             />
 
             <ConfigPanel
-              title="Audio Settings"
+              title={getT("config.audioCompression.title")}
-              description="Configure compression parameters"
+              description={getT("config.audioCompression.description")}
               options={configOptions.map((opt) => ({
                 ...opt,
                 value: config[opt.id as keyof AudioCompressConfig],
@@ -226,7 +239,7 @@ export default function AudioCompressPage() {
             {canProcess && (
               <Button onClick={handleProcess} size="lg" className="w-full">
                 <Volume2 className="mr-2 h-4 w-4" />
-                Compress Audio
+                {getT("tools.audioCompression.compressAudio")}
               </Button>
             )}
           </div>
@@ -241,15 +254,15 @@ export default function AudioCompressPage() {
             )}
 
             <div className="rounded-lg border border-border/40 bg-card/50 p-6">
-              <h3 className="mb-3 font-semibold">Supported Formats</h3>
+              <h3 className="mb-3 font-semibold">{getT("tools.audioCompression.supportedFormats")}</h3>
               <div className="grid grid-cols-2 gap-3 text-sm text-muted-foreground">
                 <div>
-                  <p className="font-medium text-foreground">Input</p>
+                  <p className="font-medium text-foreground">{getT("tools.audioCompression.input")}</p>
-                  <p>MP3, WAV, OGG, AAC, FLAC, M4A</p>
+                  <p>{getT("tools.audioCompression.inputFormats")}</p>
                 </div>
                 <div>
-                  <p className="font-medium text-foreground">Output</p>
+                  <p className="font-medium text-foreground">{getT("tools.audioCompression.output")}</p>
-                  <p>MP3, AAC, OGG, FLAC</p>
+                  <p>{getT("tools.audioCompression.outputFormats")}</p>
                 </div>
               </div>
             </div>

src/app/(dashboard)/tools/image-compress/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const headersList = await headers();
+  const acceptLanguage = headersList.get("accept-language") || "";
+  const lang = acceptLanguage.includes("zh") ? "zh" : "en";
+
+  const titles = {
+    en: "Image Compression - Optimize Images for Web & Mobile",
+    zh: "图片压缩 - 为网页和移动端优化图片",
+  };
+
+  const descriptions = {
+    en: "Optimize images for web and mobile without quality loss. Support for batch processing and format conversion including PNG, JPEG, WebP.",
+    zh: "为网页和移动端优化图片，不影响质量。支持批量处理和格式转换，包括 PNG、JPEG、WebP。",
+  };
+
+  return {
+    title: titles[lang],
+    description: descriptions[lang],
+    openGraph: {
+      title: titles[lang],
+      description: descriptions[lang],
+    },
+    twitter: {
+      title: titles[lang],
+      description: descriptions[lang],
+    },
+  };
+}
+
+export default function ImageCompressLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

src/app/(dashboard)/tools/image-compress/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Image as ImageIcon, Zap } from "lucide-react";
 import { FileUploader } from "@/components/tools/FileUploader";
@@ -10,46 +10,123 @@ import { ConfigPanel, type ConfigOption } from "@/components/tools/ConfigPanel";
 import { Button } from "@/components/ui/button";
 import { useUploadStore } from "@/store/uploadStore";
 import { generateId } from "@/lib/utils";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
 import type { UploadedFile, ProcessedFile, ImageCompressConfig } from "@/types";
 
 const imageAccept = {
-  "image/*": [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp"],
+  "image/*": [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp", ".tiff"],
 };
 
 const defaultConfig: ImageCompressConfig = {
   quality: 80,
-  format: "original",
+  format: "auto",
 };
 
-const configOptions: ConfigOption[] = [
+function useConfigOptions(config: ImageCompressConfig, getT: (key: string) => string): ConfigOption[] {
-  {
+  return [
-    id: "quality",
+    {
-    type: "slider",
+      id: "quality",
-    label: "Compression Quality",
+      type: "slider",
-    description: "Lower quality = smaller file size",
+      label: getT("config.imageCompression.quality"),
-    value: defaultConfig.quality,
+      description: getT("config.imageCompression.qualityDescription"),
-    min: 1,
+      value: config.quality,
-    max: 100,
+      min: 1,
-    step: 1,
+      max: 100,
-    suffix: "%",
+      step: 1,
-    icon: <Zap className="h-4 w-4" />,
+      suffix: "%",
-  },
+      icon: <Zap className="h-4 w-4" />,
-  {
+    },
-    id: "format",
+    {
-    type: "select",
+      id: "format",
-    label: "Output Format",
+      type: "select",
-    description: "Convert to a different format (optional)",
+      label: getT("config.imageCompression.format"),
-    value: defaultConfig.format,
+      description: getT("config.imageCompression.formatDescription"),
-    options: [
+      value: config.format,
-      { label: "Original", value: "original" },
+      options: [
-      { label: "JPEG", value: "jpeg" },
+        { label: getT("config.imageCompression.formatAuto"), value: "auto" },
-      { label: "PNG", value: "png" },
+        { label: getT("config.imageCompression.formatOriginal"), value: "original" },
-      { label: "WebP", value: "webp" },
+        { label: getT("config.imageCompression.formatJpeg"), value: "jpeg" },
-    ],
+        { label: getT("config.imageCompression.formatPng"), value: "png" },
-  },
+        { label: getT("config.imageCompression.formatWebp"), value: "webp" },
-];
+        { label: getT("config.imageCompression.formatAvif"), value: "avif" },
+      ],
+    },
+  ];
+}
+
+/**
+ * Upload a file to the server
+ */
+async function uploadFile(file: File): Promise<{ fileId: string } | null> {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const response = await fetch("/api/upload", {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || "Upload failed");
+  }
+
+  const data = await response.json();
+  return { fileId: data.fileId };
+}
+
+interface ProcessResult {
+  success: boolean;
+  data?: {
+    fileUrl: string;
+    filename: string;
+    metadata: {
+      originalSize: number;
+      compressedSize: number;
+      compressionRatio: number;
+      format: string;
+      quality?: number;
+      width?: number;
+      height?: number;
+    };
+  };
+  error?: string;
+}
+
+/**
+ * Process image compression
+ */
+async function processImageCompression(
+  fileId: string,
+  config: ImageCompressConfig
+): Promise<ProcessResult> {
+  const response = await fetch("/api/process/image-compress", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ fileId, config }),
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    return { success: false, error: data.error || "Processing failed" };
+  }
+
+  return { success: true, data };
+}
 
 export default function ImageCompressPage() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const { t } = useTranslation();
+
+  const getT = (key: string, params?: Record<string, string | number>) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
+  };
+
   const { files, addFile, removeFile, clearFiles, processingStatus, setProcessingStatus } =
     useUploadStore();
 
@@ -72,7 +149,7 @@ export default function ImageCompressPage() {
     [addFile]
   );
 
-  const handleConfigChange = (id: string, value: any) => {
+  const handleConfigChange = (id: string, value: string | number | boolean | undefined) => {
     setConfig((prev) => ({ ...prev, [id]: value }));
   };
 
@@ -86,88 +163,140 @@ export default function ImageCompressPage() {
     setProcessingStatus({
       status: "uploading",
       progress: 0,
-      message: "Uploading images...",
+      message: getT("processing.uploadingImages"),
     });
 
+    const results: ProcessedFile[] = [];
+    const errors: string[] = [];
+
     try {
-      // Simulate upload
+      // Process each file
-      for (let i = 0; i <= 100; i += 10) {
+      for (let i = 0; i < files.length; i++) {
-        await new Promise((resolve) => setTimeout(resolve, 50));
+        const file = files[i];
+
+        // Update progress
+        const uploadProgress = Math.round(((i + 0.5) / files.length) * 50);
         setProcessingStatus({
           status: "uploading",
-          progress: i,
+          progress: uploadProgress,
-          message: `Uploading... ${i}%`,
+          message: getT("processing.uploadProgress", { progress: uploadProgress }),
         });
-      }
 
-      setProcessingStatus({
+        // Upload file
-        status: "processing",
+        let fileId: string;
-        progress: 0,
+        try {
-        message: "Compressing images...",
+          const uploadResult = await uploadFile(file.file);
-      });
+          if (!uploadResult) {
+            throw new Error("Upload failed");
+          }
+          fileId = uploadResult.fileId;
+        } catch (error) {
+          errors.push(`${file.name}: ${error instanceof Error ? error.message : "Upload failed"}`);
+          continue;
+        }
 
-      // Simulate processing
+        // Update progress to processing
-      for (let i = 0; i <= 100; i += 5) {
+        const processProgress = 50 + Math.round(((i + 0.5) / files.length) * 50);
-        await new Promise((resolve) => setTimeout(resolve, 100));
         setProcessingStatus({
           status: "processing",
-          progress: i,
+          progress: processProgress,
-          message: `Compressing... ${i}%`,
+          message: getT("processing.compressProgress", { progress: processProgress }),
         });
+
+        // Process image
+        try {
+          const result = await processImageCompression(fileId, config);
+
+          if (result.success && result.data) {
+            results.push({
+              id: generateId(),
+              originalFile: file,
+              processedUrl: result.data.fileUrl,
+              metadata: {
+                format: result.data.metadata.format,
+                quality: result.data.metadata.quality,
+                compressionRatio: result.data.metadata.compressionRatio,
+                resolution: `${result.data.metadata.width}x${result.data.metadata.height}`,
+                originalSize: result.data.metadata.originalSize,
+                compressedSize: result.data.metadata.compressedSize,
+              },
+              createdAt: new Date(),
+            });
+          } else {
+            errors.push(
+              `${file.name}: ${result.error || getT("processing.unknownError")}`
+            );
+          }
+        } catch (error) {
+          errors.push(
+            `${file.name}: ${error instanceof Error ? error.message : "Processing failed"}`
+          );
+        }
       }
 
-      // Simulate completion
+      // Clear uploaded files
-      const results: ProcessedFile[] = files.map((file) => ({
-        id: generateId(),
-        originalFile: file,
-        processedUrl: "#",
-        metadata: {
-          format: config.format === "original" ? file.file.type.split("/")[1] : config.format,
-          quality: config.quality,
-          compressionRatio: Math.floor(Math.random() * 30) + 40, // Simulated 40-70%
-        },
-        createdAt: new Date(),
-      }));
-
-      setProcessedFiles(results);
       clearFiles();
 
-      setProcessingStatus({
+      // Set final status
-        status: "completed",
+      if (results.length > 0) {
-        progress: 100,
+        setProcessedFiles(results);
-        message: "Compression complete!",
+        setProcessingStatus({
-      });
+          status: "completed",
+          progress: 100,
+          message: getT("processing.compressionComplete"),
+        });
+      } else if (errors.length > 0) {
+        setProcessingStatus({
+          status: "failed",
+          progress: 0,
+          message: errors[0],
+          error: errors.join("; "),
+        });
+      } else {
+        setProcessingStatus({
+          status: "failed",
+          progress: 0,
+          message: getT("processing.compressionFailed"),
+        });
+      }
     } catch (error) {
       setProcessingStatus({
         status: "failed",
         progress: 0,
-        message: "Compression failed",
+        message: getT("processing.compressionFailed"),
-        error: error instanceof Error ? error.message : "Unknown error",
+        error: error instanceof Error ? error.message : getT("processing.unknownError"),
       });
     }
   };
 
   const handleDownload = (fileId: string) => {
-    console.log("Downloading file:", fileId);
+    const file = processedFiles.find((f) => f.id === fileId);
+    if (file) {
+      // Create a temporary link to trigger download
+      const link = document.createElement("a");
+      link.href = file.processedUrl;
+      link.download = file.metadata.filename || `compressed-${file.originalFile.name}`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
   };
 
   const canProcess = files.length > 0 && processingStatus.status !== "processing";
+  const configOptions = useConfigOptions(config, getT);
 
   return (
     <div className="p-6">
-      <motion.div
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-      >
         <div className="mb-8">
           <div className="flex items-center gap-3">
             <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
               <ImageIcon className="h-6 w-6 text-primary" />
             </div>
             <div>
-              <h1 className="text-3xl font-bold">Image Compression</h1>
+              <h1 className="text-3xl font-bold">{getT("tools.imageCompression.title")}</h1>
               <p className="text-muted-foreground">
-                Optimize images for web and mobile without quality loss
+                {getT("tools.imageCompression.description")}
               </p>
             </div>
           </div>
@@ -186,12 +315,9 @@ export default function ImageCompressPage() {
             />
 
             <ConfigPanel
-              title="Compression Settings"
+              title={getT("config.imageCompression.title")}
-              description="Configure compression options"
+              description={getT("config.imageCompression.description")}
-              options={configOptions.map((opt) => ({
+              options={configOptions}
-                ...opt,
-                value: config[opt.id as keyof ImageCompressConfig],
-              }))}
               onChange={handleConfigChange}
               onReset={handleResetConfig}
             />
@@ -199,7 +325,7 @@ export default function ImageCompressPage() {
             {canProcess && (
               <Button onClick={handleProcess} size="lg" className="w-full">
                 <Zap className="mr-2 h-4 w-4" />
-                Compress Images
+                {getT("tools.imageCompression.compressImages")}
               </Button>
             )}
           </div>
@@ -214,12 +340,13 @@ export default function ImageCompressPage() {
             )}
 
             <div className="rounded-lg border border-border/40 bg-card/50 p-6">
-              <h3 className="mb-3 font-semibold">Features</h3>
+              <h3 className="mb-3 font-semibold">{getT("tools.imageCompression.features")}</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                <li>• Batch processing - compress multiple images at once</li>
+                {(getT("tools.imageCompression.featureList") as unknown as string[]).map(
-                <li>• Smart compression - maintains visual quality</li>
+                  (feature, index) => (
-                <li>• Format conversion - PNG to JPEG, WebP, and more</li>
+                    <li key={index}>• {feature}</li>
-                <li>• Up to 80% size reduction without quality loss</li>
+                  )
+                )}
               </ul>
             </div>
           </div>

src/app/(dashboard)/tools/texture-atlas/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect } from "react";
+import { motion } from "framer-motion";
+import { Layers as LayersIcon } from "lucide-react";
+import { 
+  FileListPanel, 
+  CanvasPreview, 
+  AtlasConfigPanel, 
+  AnimationPreviewDialog 
+} from "@/components/tools/atlas";
+import { useAtlasStore } from "@/store/atlasStore";
+import { useAtlasWorker } from "@/hooks/useAtlasWorker";
+import { useSafeTranslation } from "@/lib/i18n";
+
+export default function TextureAtlasPage() {
+  const { t, mounted } = useSafeTranslation();
+  
+  const { sprites, config } = useAtlasStore();
+  const { pack } = useAtlasWorker();
+
+  // Auto-pack when sprites or config changes (with debounce)
+  useEffect(() => {
+    if (sprites.length === 0) return;
+
+    const timer = setTimeout(() => {
+      pack();
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [sprites, config, pack]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      // Don't clear sprites on unmount - keep state for when user returns
+    };
+  }, []);
+
+  const getT = (key: string) => {
+    if (!mounted) return key.split(".").pop() || key;
+    return t(key);
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden">
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="shrink-0 border-b border-border/40 bg-background/80 backdrop-blur-sm"
+      >
+        <div className="flex items-center gap-3 px-5 py-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10">
+            <LayersIcon className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold">{getT("tools.textureAtlas.title")}</h1>
+            <p className="text-xs text-muted-foreground">
+              {getT("tools.textureAtlas.description")}
+            </p>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Three-column layout */}
+      <div className="flex flex-1 gap-4 overflow-hidden p-4">
+        {/* Left panel - File list */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.1 }}
+          className="relative w-64 shrink-0"
+        >
+          <FileListPanel />
+        </motion.div>
+
+        {/* Center panel - Canvas preview */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.98 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.2 }}
+          className="flex-1 min-w-0"
+        >
+          <CanvasPreview />
+        </motion.div>
+
+        {/* Right panel - Config */}
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.3 }}
+          className="w-72 shrink-0"
+        >
+          <AtlasConfigPanel />
+        </motion.div>
+      </div>
+
+      {/* Animation preview dialog */}
+      <AnimationPreviewDialog />
+    </div>
+  );
+}

src/app/(dashboard)/tools/video-frames/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const headersList = await headers();
+  const acceptLanguage = headersList.get("accept-language") || "";
+  const lang = acceptLanguage.includes("zh") ? "zh" : "en";
+
+  const titles = {
+    en: "Video to Frames - Extract Frames from Videos",
+    zh: "视频抽帧 - 从视频中提取帧",
+  };
+
+  const descriptions = {
+    en: "Extract frames from videos with customizable frame rates. Perfect for sprite animations and game asset preparation. Supports MP4, MOV, AVI, WebM.",
+    zh: "从视频中提取帧，可自定义帧率。非常适合精灵动画制作和游戏素材准备。支持 MP4、MOV、AVI、WebM。",
+  };
+
+  return {
+    title: titles[lang],
+    description: descriptions[lang],
+    openGraph: {
+      title: titles[lang],
+      description: descriptions[lang],
+    },
+    twitter: {
+      title: titles[lang],
+      description: descriptions[lang],
+    },
+  };
+}
+
+export default function VideoFramesLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

src/app/(dashboard)/tools/video-frames/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Video, Settings } from "lucide-react";
 import { FileUploader } from "@/components/tools/FileUploader";
@@ -10,6 +10,7 @@ import { ConfigPanel, type ConfigOption } from "@/components/tools/ConfigPanel";
 import { Button } from "@/components/ui/button";
 import { useUploadStore } from "@/store/uploadStore";
 import { generateId } from "@/lib/utils";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
 import type { UploadedFile, ProcessedFile, VideoFramesConfig } from "@/types";
 
 const videoAccept = {
@@ -24,45 +25,56 @@ const defaultConfig: VideoFramesConfig = {
   height: undefined,
 };
 
-const configOptions: ConfigOption[] = [
+function useConfigOptions(config: VideoFramesConfig, getT: (key: string) => string): ConfigOption[] {
-  {
+  return [
-    id: "fps",
+    {
-    type: "slider",
+      id: "fps",
-    label: "Frame Rate",
+      type: "slider",
-    description: "Number of frames to extract per second",
+      label: getT("config.videoFrames.fps"),
-    value: defaultConfig.fps,
+      description: getT("config.videoFrames.fpsDescription"),
-    min: 1,
+      value: config.fps,
-    max: 60,
+      min: 1,
-    step: 1,
+      max: 60,
-    suffix: " fps",
+      step: 1,
-    icon: <Video className="h-4 w-4" />,
+      suffix: " fps",
-  },
+      icon: <Video className="h-4 w-4" />,
-  {
+    },
-    id: "format",
+    {
-    type: "select",
+      id: "format",
-    label: "Output Format",
+      type: "select",
-    description: "Image format for the extracted frames",
+      label: getT("config.videoFrames.format"),
-    value: defaultConfig.format,
+      description: getT("config.videoFrames.formatDescription"),
-    options: [
+      value: config.format,
-      { label: "PNG", value: "png" },
+      options: [
-      { label: "JPEG", value: "jpeg" },
+        { label: "PNG", value: "png" },
-      { label: "WebP", value: "webp" },
+        { label: "JPEG", value: "jpeg" },
-    ],
+        { label: "WebP", value: "webp" },
-  },
+      ],
-  {
+    },
-    id: "quality",
+    {
-    type: "slider",
+      id: "quality",
-    label: "Quality",
+      type: "slider",
-    description: "Image quality (for JPEG and WebP)",
+      label: getT("config.videoFrames.quality"),
-    value: defaultConfig.quality,
+      description: getT("config.videoFrames.qualityDescription"),
-    min: 1,
+      value: config.quality,
-    max: 100,
+      min: 1,
-    step: 1,
+      max: 100,
-    suffix: "%",
+      step: 1,
-  },
+      suffix: "%",
-];
+    },
+  ];
+}
 
 export default function VideoFramesPage() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const { t } = useTranslation();
+
+  const getT = (key: string, params?: Record<string, string | number>) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
+  };
+
   const { files, addFile, removeFile, clearFiles, processingStatus, setProcessingStatus } =
     useUploadStore();
 
@@ -85,7 +97,7 @@ export default function VideoFramesPage() {
     [addFile]
   );
 
-  const handleConfigChange = (id: string, value: any) => {
+  const handleConfigChange = (id: string, value: string | number | boolean | undefined) => {
     setConfig((prev) => ({ ...prev, [id]: value }));
   };
 
@@ -99,7 +111,7 @@ export default function VideoFramesPage() {
     setProcessingStatus({
       status: "uploading",
       progress: 0,
-      message: "Uploading video...",
+      message: getT("processing.uploadingVideo"),
     });
 
     try {
@@ -109,14 +121,14 @@ export default function VideoFramesPage() {
         setProcessingStatus({
           status: "uploading",
           progress: i,
-          message: `Uploading... ${i}%`,
+          message: getT("processing.uploadProgress", { progress: i }),
         });
       }
 
       setProcessingStatus({
         status: "processing",
         progress: 0,
-        message: "Extracting frames...",
+        message: getT("processing.extractingFrames"),
       });
 
       // Simulate processing
@@ -125,7 +137,7 @@ export default function VideoFramesPage() {
         setProcessingStatus({
           status: "processing",
           progress: i,
-          message: `Processing... ${i}%`,
+          message: getT("processing.processProgress", { progress: i }),
         });
       }
 
@@ -149,24 +161,24 @@ export default function VideoFramesPage() {
       setProcessingStatus({
         status: "completed",
         progress: 100,
-        message: "Processing complete!",
+        message: getT("processing.processingComplete"),
       });
     } catch (error) {
       setProcessingStatus({
         status: "failed",
         progress: 0,
-        message: "Processing failed",
+        message: getT("processing.processingFailed"),
-        error: error instanceof Error ? error.message : "Unknown error",
+        error: error instanceof Error ? error.message : getT("processing.unknownError"),
       });
     }
   };
 
   const handleDownload = (fileId: string) => {
     console.log("Downloading file:", fileId);
-    // Implement download logic
   };
 
   const canProcess = files.length > 0 && processingStatus.status !== "processing";
+  const configOptions = useConfigOptions(config, getT);
 
   return (
     <div className="p-6">
@@ -181,9 +193,9 @@ export default function VideoFramesPage() {
               <Video className="h-6 w-6 text-primary" />
             </div>
             <div>
-              <h1 className="text-3xl font-bold">Video to Frames</h1>
+              <h1 className="text-3xl font-bold">{getT("tools.videoFrames.title")}</h1>
               <p className="text-muted-foreground">
-                Extract frames from videos with customizable settings
+                {getT("tools.videoFrames.description")}
               </p>
             </div>
           </div>
@@ -203,8 +215,8 @@ export default function VideoFramesPage() {
             />
 
             <ConfigPanel
-              title="Export Settings"
+              title={getT("config.videoFrames.title")}
-              description="Configure how frames are extracted"
+              description={getT("config.videoFrames.description")}
               options={configOptions.map((opt) => ({
                 ...opt,
                 value: config[opt.id as keyof VideoFramesConfig],
@@ -216,7 +228,7 @@ export default function VideoFramesPage() {
             {canProcess && (
               <Button onClick={handleProcess} size="lg" className="w-full">
                 <Settings className="mr-2 h-4 w-4" />
-                Process Video
+                {getT("tools.videoFrames.processVideo")}
               </Button>
             )}
           </div>
@@ -233,12 +245,11 @@ export default function VideoFramesPage() {
 
             {/* Info Card */}
             <div className="rounded-lg border border-border/40 bg-card/50 p-6">
-              <h3 className="mb-3 font-semibold">How it works</h3>
+              <h3 className="mb-3 font-semibold">{getT("tools.videoFrames.howItWorks")}</h3>
               <ol className="space-y-2 text-sm text-muted-foreground">
-                <li>1. Upload your video file (MP4, MOV, AVI, etc.)</li>
+                {(getT("tools.videoFrames.steps") as unknown as string[]).map((step, index) => (
-                <li>2. Configure frame rate, format, and quality</li>
+                  <li key={index}>{index + 1}. {step}</li>
-                <li>3. Click &quot;Process Video&quot; to start extraction</li>
+                ))}
-                <li>4. Download the ZIP file with all frames</li>
               </ol>
             </div>
           </div>

src/app/api/download/[id]/route.ts

@@ -0,0 +1,72 @@
+import { NextRequest, NextResponse } from "next/server";
+import { sanitizeFilename } from "@/lib/file-storage";
+import { getProcessedFile } from "@/lib/file-storage";
+
+export const runtime = "nodejs";
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+
+    // Validate ID format (UUID-like)
+    if (!id || typeof id !== "string") {
+      return NextResponse.json(
+        { success: false, error: "Invalid download ID" },
+        { status: 400 }
+      );
+    }
+
+    // Sanitize ID to prevent path traversal
+    const sanitizedId = sanitizeFilename(id);
+    if (sanitizedId !== id) {
+      return NextResponse.json(
+        { success: false, error: "Invalid download ID" },
+        { status: 400 }
+      );
+    }
+
+    // Basic UUID format validation
+    const uuidRegex =
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+    if (!uuidRegex.test(id)) {
+      return NextResponse.json(
+        { success: false, error: "Invalid download ID format" },
+        { status: 400 }
+      );
+    }
+
+    // Get processed file
+    const fileData = await getProcessedFile(id);
+
+    if (!fileData || fileData.length === 0) {
+      return NextResponse.json(
+        { success: false, error: "File not found or expired" },
+        { status: 404 }
+      );
+    }
+
+    const { buffer, filename, contentType } = fileData[0];
+
+    // Create response with file
+    const response = new NextResponse(buffer as unknown as BodyInit, {
+      status: 200,
+      headers: {
+        "Content-Type": contentType,
+        "Content-Disposition": `attachment; filename="${encodeURIComponent(filename)}"`,
+        "Content-Length": buffer.length.toString(),
+        "Cache-Control": "private, max-age=3600",
+      },
+    });
+
+    return response;
+  } catch (error) {
+    console.error("Download error:", error);
+    return NextResponse.json(
+      { success: false, error: "Download failed" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/process/image-compress/route.ts

@@ -1,57 +1,137 @@
 import { NextRequest, NextResponse } from "next/server";
+import { readFile, readdir } from "fs/promises";
+import path from "path";
 import type { ImageCompressConfig } from "@/types";
+import {
+  saveProcessedFile,
+  cleanupFile,
+  sanitizeFilename,
+} from "@/lib/file-storage";
+import {
+  compressImage,
+  getImageMetadata,
+  validateImageBuffer,
+  validateCompressConfig,
+} from "@/lib/image-processor";
 
 export const runtime = "nodejs";
 
+const UPLOAD_DIR = process.env.TEMP_DIR || path.join(process.cwd(), ".temp", "uploads");
+
 interface ProcessRequest {
   fileId: string;
   config: ImageCompressConfig;
 }
 
+/**
+ * Find file by ID in upload directory
+ */
+async function findUploadedFile(fileId: string): Promise<{ buffer: Buffer; name: string } | null> {
+  try {
+    const files = await readdir(UPLOAD_DIR);
+    const file = files.find((f) => f.startsWith(`${fileId}.`));
+
+    if (!file) {
+      return null;
+    }
+
+    const filePath = path.join(UPLOAD_DIR, file);
+    const buffer = await readFile(filePath);
+
+    // Validate it's actually an image
+    const isValid = await validateImageBuffer(buffer);
+    if (!isValid) {
+      return null;
+    }
+
+    // Extract original name from file (remove UUID prefix)
+    const originalName = file.substring(fileId.length + 1);
+
+    return { buffer, name: originalName };
+  } catch {
+    return null;
+  }
+}
+
 export async function POST(request: NextRequest) {
   try {
     const body: ProcessRequest = await request.json();
     const { fileId, config } = body;
 
-    if (!fileId) {
+    // Validate request
+    if (!fileId || typeof fileId !== "string") {
       return NextResponse.json(
-        { success: false, error: "No file ID provided" },
+        { success: false, error: "Valid file ID is required" },
+        { status: 400 }
+      );
+    }
+
+    // Sanitize file ID to prevent path traversal
+    const sanitizedId = sanitizeFilename(fileId).replace(/\.[^.]+$/, "");
+    if (sanitizedId !== fileId) {
+      return NextResponse.json(
+        { success: false, error: "Invalid file ID" },
         { status: 400 }
       );
     }
 
     // Validate config
-    if (!config.quality || config.quality < 1 || config.quality > 100) {
+    const configValidation = validateCompressConfig(config);
+    if (!configValidation.valid) {
       return NextResponse.json(
-        { success: false, error: "Invalid quality value" },
+        { success: false, error: configValidation.error },
         { status: 400 }
       );
     }
 
-    // In production, you would:
+    // Find uploaded file
-    // 1. Retrieve the file from storage
+    const uploadedFile = await findUploadedFile(fileId);
-    // 2. Use Sharp to compress the image
+    if (!uploadedFile) {
-    // 3. Apply format conversion if needed
+      return NextResponse.json(
-    // 4. Upload to R2/S3
+        { success: false, error: "File not found or expired" },
-    // 5. Return download URL
+        { status: 404 }
+      );
+    }
 
-    // Mock processing for now
+    // Get original metadata
-    const resultFileId = `processed-${Date.now()}`;
+    const originalMetadata = await getImageMetadata(uploadedFile.buffer);
+
+    // Process image
+    const result = await compressImage(uploadedFile.buffer, config);
+
+    // Save processed file
+    const outputFormat = config.format === "original" ? originalMetadata.format : config.format;
+    const downloadInfo = await saveProcessedFile(
+      fileId, // Original file ID for tracking
+      result.buffer,
+      outputFormat,
+      uploadedFile.name
+    );
+
+    // Cleanup original file
+    await cleanupFile(fileId);
 
     return NextResponse.json({
       success: true,
-      fileUrl: `/api/download/${resultFileId}`,
+      fileUrl: downloadInfo.fileUrl,
-      filename: `compressed-${resultFileId}`,
+      filename: downloadInfo.filename,
       metadata: {
-        format: config.format,
+        format: result.format,
         quality: config.quality,
-        compressionRatio: Math.floor(Math.random() * 30) + 40, // Mock 40-70%
+        compressionRatio: result.compressionRatio,
+        originalSize: result.originalSize,
+        compressedSize: result.compressedSize,
+        width: result.width,
+        height: result.height,
       },
     });
   } catch (error) {
     console.error("Processing error:", error);
     return NextResponse.json(
-      { success: false, error: "Processing failed" },
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "Processing failed",
+      },
       { status: 500 }
     );
   }

src/app/api/process/texture-atlas/route.ts

@@ -0,0 +1,281 @@
+import { NextRequest, NextResponse } from "next/server";
+import { readFile, readdir } from "fs/promises";
+import path from "path";
+import type { TextureAtlasConfig, AtlasSprite } from "@/types";
+import {
+  saveProcessedFile,
+  cleanupFile,
+  sanitizeFilename,
+} from "@/lib/file-storage";
+import {
+  createTextureAtlas,
+  exportToCocos2dPlist,
+  exportToCocosCreatorJson,
+  exportToGenericJson,
+  validateTextureAtlasConfig,
+} from "@/lib/texture-atlas";
+import { validateImageBuffer } from "@/lib/image-processor";
+import archiver from "archiver";
+import { PassThrough } from "stream";
+
+export const runtime = "nodejs";
+
+const UPLOAD_DIR = process.env.TEMP_DIR || path.join(process.cwd(), ".temp", "uploads");
+
+/**
+ * Create a ZIP buffer containing the atlas image and metadata
+ */
+async function createZipBuffer(
+  imageBuffer: Buffer,
+  imageFilename: string,
+  metadataContent: string,
+  metadataFilename: string
+): Promise<Buffer> {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    const passthrough = new PassThrough();
+
+    passthrough.on("data", (chunk) => chunks.push(chunk));
+    passthrough.on("end", () => resolve(Buffer.concat(chunks)));
+    passthrough.on("error", reject);
+
+    const archive = archiver("zip", { zlib: { level: 9 } });
+    archive.on("error", reject);
+    archive.pipe(passthrough);
+
+    // Add image
+    archive.append(imageBuffer, { name: imageFilename });
+
+    // Add metadata
+    archive.append(metadataContent, { name: metadataFilename });
+
+    archive.finalize();
+  });
+}
+
+interface ProcessRequest {
+  fileIds: string[];
+  config: TextureAtlasConfig;
+  filenames?: string[];
+}
+
+/**
+ * Find uploaded files by IDs
+ */
+async function findUploadedFiles(fileIds: string[]): Promise<
+  Array<{ fileId: string; buffer: Buffer; name: string }>
+> {
+  const files: Array<{ fileId: string; buffer: Buffer; name: string }> = [];
+
+  for (const fileId of fileIds) {
+    try {
+      const sanitizedId = sanitizeFilename(fileId).replace(/\.[^.]+$/, "");
+      if (sanitizedId !== fileId) {
+        continue;
+      }
+
+      const fileList = await readdir(UPLOAD_DIR);
+      const file = fileList.find((f) => f.startsWith(`${fileId}.`));
+
+      if (!file) {
+        continue;
+      }
+
+      const filePath = path.join(UPLOAD_DIR, file);
+      const buffer = await readFile(filePath);
+
+      // Validate it's actually an image
+      const isValid = await validateImageBuffer(buffer);
+      if (!isValid) {
+        continue;
+      }
+
+      // Extract original name from file (remove UUID prefix)
+      const originalName = file.substring(fileId.length + 1);
+
+      files.push({ fileId, buffer, name: originalName });
+    } catch {
+      // Skip invalid files
+      continue;
+    }
+  }
+
+  return files;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body: ProcessRequest = await request.json();
+    const { fileIds, config, filenames } = body;
+
+    // Validate request
+    if (!fileIds || !Array.isArray(fileIds) || fileIds.length === 0) {
+      return NextResponse.json(
+        { success: false, error: "At least one file ID is required" },
+        { status: 400 }
+      );
+    }
+
+    if (fileIds.length > 500) {
+      return NextResponse.json(
+        { success: false, error: "Maximum 500 sprites allowed per atlas" },
+        { status: 400 }
+      );
+    }
+
+    // Validate config
+    const configValidation = validateTextureAtlasConfig(config);
+    if (!configValidation.valid) {
+      return NextResponse.json(
+        { success: false, error: configValidation.error },
+        { status: 400 }
+      );
+    }
+
+    // Sanitize file IDs
+    for (const fileId of fileIds) {
+      const sanitizedId = sanitizeFilename(fileId).replace(/\.[^.]+$/, "");
+      if (sanitizedId !== fileId) {
+        return NextResponse.json(
+          { success: false, error: `Invalid file ID: ${fileId}` },
+          { status: 400 }
+        );
+      }
+    }
+
+    // Find all uploaded files
+    const uploadedFiles = await findUploadedFiles(fileIds);
+
+    if (uploadedFiles.length === 0) {
+      return NextResponse.json(
+        { success: false, error: "No valid files found or files have expired" },
+        { status: 404 }
+      );
+    }
+
+    if (uploadedFiles.length !== fileIds.length) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: `${fileIds.length - uploadedFiles.length} file(s) not found or expired`,
+        },
+        { status: 404 }
+      );
+    }
+
+    // Prepare sprites
+    const sprites: AtlasSprite[] = uploadedFiles.map((file, index) => ({
+      id: file.fileId,
+      name: filenames?.[index] || file.name,
+      width: 0,
+      height: 0,
+      buffer: file.buffer,
+    }));
+
+    // Create texture atlas
+    let atlasResult;
+    try {
+      atlasResult = await createTextureAtlas(sprites, config);
+    } catch (error) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: error instanceof Error ? error.message : "Failed to create texture atlas",
+        },
+        { status: 422 }
+      );
+    }
+
+    // Define filenames
+    const imageFilename = `atlas.${atlasResult.format}`;
+    let metadataFilename: string;
+
+    // Export metadata based on format
+    let metadataContent: string;
+
+    switch (config.outputFormat) {
+      case "cocos2d":
+        metadataContent = exportToCocos2dPlist(atlasResult, imageFilename);
+        metadataFilename = "atlas.plist";
+        break;
+      case "cocos-creator":
+        metadataContent = exportToCocosCreatorJson(atlasResult, imageFilename);
+        metadataFilename = "atlas.json";
+        break;
+      case "generic-json":
+        metadataContent = exportToGenericJson(atlasResult, imageFilename);
+        metadataFilename = "atlas.json";
+        break;
+      default:
+        metadataContent = exportToCocosCreatorJson(atlasResult, imageFilename);
+        metadataFilename = "atlas.json";
+    }
+
+    // Create ZIP file with both image and metadata
+    const zipBuffer = await createZipBuffer(
+      atlasResult.image,
+      imageFilename,
+      metadataContent,
+      metadataFilename
+    );
+
+    // Save ZIP file
+    const zipInfo = await saveProcessedFile(
+      `atlas_${Date.now()}`,
+      zipBuffer,
+      "zip",
+      "atlas.zip"
+    );
+
+    // Also save individual files for preview
+    const imageInfo = await saveProcessedFile(
+      `atlas_img_${Date.now()}`,
+      atlasResult.image,
+      atlasResult.format,
+      imageFilename
+    );
+
+    const metadataBuffer = Buffer.from(metadataContent, "utf-8");
+    const metadataInfo = await saveProcessedFile(
+      `atlas_meta_${Date.now()}`,
+      metadataBuffer,
+      config.outputFormat === "cocos2d" ? "plist" : "json",
+      metadataFilename
+    );
+
+    // Cleanup uploaded files
+    for (const fileId of fileIds) {
+      try {
+        await cleanupFile(fileId);
+      } catch {
+        // Ignore cleanup errors
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      imageUrl: imageInfo.fileUrl,
+      metadataUrl: metadataInfo.fileUrl,
+      zipUrl: zipInfo.fileUrl,
+      imageFilename: imageInfo.filename,
+      metadataFilename: metadataInfo.filename,
+      zipFilename: zipInfo.filename,
+      metadata: {
+        width: atlasResult.width,
+        height: atlasResult.height,
+        format: atlasResult.format,
+        frameCount: atlasResult.frames.length,
+        outputFormat: config.outputFormat,
+      },
+    });
+  } catch (error) {
+    console.error("Texture atlas processing error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "Texture atlas processing failed",
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/upload/route.ts

@@ -1,4 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
+import {
+  saveUploadedFile,
+  validateImageFile,
+  getAllowedImageTypes,
+  getMaxFileSize,
+} from "@/lib/file-storage";
 
 export const runtime = "nodejs";
 
@@ -14,31 +20,26 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    // Check file size
+    // Validate file
-    const maxSize = parseInt(process.env.MAX_FILE_SIZE || "52428800"); // 50MB default
+    const validation = validateImageFile(file);
-    if (file.size > maxSize) {
+    if (!validation.valid) {
       return NextResponse.json(
-        { success: false, error: `File size exceeds ${maxSize / 1024 / 1024}MB limit` },
+        { success: false, error: validation.error },
         { status: 400 }
       );
     }
 
-    // Generate file ID
+    // Save file to temp storage
-    const fileId = `${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const result = await saveUploadedFile(file);
-
-    // In production, you would:
-    // 1. Save to Cloudflare R2 or S3
-    // 2. Return the actual URL
-    // For now, we'll return a mock response
 
     return NextResponse.json({
       success: true,
-      fileId,
+      fileId: result.fileId,
-      fileUrl: `/uploads/${fileId}`,
+      fileUrl: `/api/file/${result.fileId}`,
       metadata: {
-        name: file.name,
+        name: result.originalName,
-        size: file.size,
+        size: result.size,
-        type: file.type,
+        type: result.type,
       },
     });
   } catch (error) {
@@ -49,3 +50,11 @@ export async function POST(request: NextRequest) {
     );
   }
 }
+
+// Return allowed file types and max size for client
+export async function GET() {
+  return NextResponse.json({
+    allowedTypes: getAllowedImageTypes(),
+    maxSize: getMaxFileSize(),
+  });
+}

src/app/globals.css

@@ -106,8 +106,21 @@
     );
     background-size: 1000px 100%;
   }
+
+  /* Subtle film grain (Apple-ish texture) */
+  .noise-overlay {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
+    background-size: 180px 180px;
+  }
+
+  /* Gentle top fade used by hero backgrounds */
+  .mask-fade-y {
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
+    mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
+  }
 }
 
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;

src/app/layout.tsx

@@ -1,15 +1,13 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
 import { Header } from "@/components/layout/Header";
 import { Footer } from "@/components/layout/Footer";
 import { cn } from "@/lib/utils";
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
-
 export const metadata: Metadata = {
   title: "Mini Game AI - AI-Powered Tools for Game Developers",
-  description: "Transform your game development workflow with AI-powered tools. Video to frames, image compression, audio processing, and more.",
+  description:
+    "Transform your game development workflow with AI-powered tools. Video to frames, image compression, audio processing, and more.",
   keywords: ["game development", "AI tools", "video processing", "image compression", "audio processing"],
 };
 
@@ -20,7 +18,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
-      <body className={cn("min-h-screen bg-background font-sans antialiased", inter.variable)}>
+      <body className={cn("min-h-screen bg-background font-sans antialiased")}>
         <div className="flex min-h-screen flex-col">
           <Header />
           <main className="flex-1">{children}</main>

src/app/page.tsx

@@ -1,222 +1,304 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 import {
   ArrowRight,
-  Video,
+  ChevronDown,
-  Image,
+  Image as ImageIcon,
+  Layers,
   Music,
+  ShieldCheck,
   Sparkles,
+  Video,
   Zap,
-  Shield,
-  Users,
-  Check,
 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
 
-const features = [
+type TFn = (key: string, params?: Record<string, string | number>) => string;
-  {
-    icon: Video,
-    title: "Video to Frames",
-    description: "Extract frames from videos with customizable frame rates and formats. Perfect for sprite animations.",
-    href: "/tools/video-frames",
-  },
-  {
-    icon: Image,
-    title: "Image Compression",
-    description: "Optimize images for web and mobile without quality loss. Support for batch processing.",
-    href: "/tools/image-compress",
-  },
-  {
-    icon: Music,
-    title: "Audio Compression",
-    description: "Compress and convert audio files to various formats. Adjust bitrate and sample rate.",
-    href: "/tools/audio-compress",
-  },
-  {
-    icon: Sparkles,
-    title: "AI-Powered Tools",
-    description: "Enhance your assets with AI. Upscale images, remove backgrounds, and more.",
-    href: "/tools/ai-tools",
-  },
-];
 
-const benefits = [
+function useStableT(): TFn {
-  {
+  const [mounted, setMounted] = useState(false);
-    icon: Zap,
+  const { t } = useTranslation();
-    title: "Lightning Fast",
-    description: "Process files in seconds with our optimized infrastructure.",
-  },
-  {
-    icon: Shield,
-    title: "Secure & Private",
-    description: "Your files are encrypted and automatically deleted after processing.",
-  },
-  {
-    icon: Users,
-    title: "Built for Developers",
-    description: "API access, batch processing, and tools designed for game development workflows.",
-  },
-];
 
-const pricingPlans = [
+  useEffect(() => setMounted(true), []);
-  {
-    name: "Free",
-    price: "$0",
-    description: "Perfect for trying out",
-    features: [
-      "10 processes per day",
-      "50MB max file size",
-      "Basic tools",
-      "Community support",
-    ],
-    cta: "Get Started",
-    href: "/register",
-  },
-  {
-    name: "Pro",
-    price: "$19",
-    period: "/month",
-    description: "For serious developers",
-    features: [
-      "Unlimited processes",
-      "500MB max file size",
-      "All tools including AI",
-      "Priority support",
-      "API access",
-    ],
-    cta: "Start Free Trial",
-    href: "/pricing",
-    popular: true,
-  },
-  {
-    name: "Enterprise",
-    price: "Custom",
-    description: "For teams and businesses",
-    features: [
-      "Everything in Pro",
-      "Unlimited file size",
-      "Custom integrations",
-      "Dedicated support",
-      "SLA guarantee",
-    ],
-    cta: "Contact Sales",
-    href: "/contact",
-  },
-];
 
-function HeroSection() {
+  return useMemo(() => {
+    const serverT = getServerTranslations("en").t;
+    return (key: string, params?: Record<string, string | number>) => {
+      if (!mounted) return serverT(key, params);
+      return t(key, params);
+    };
+  }, [mounted, t]);
+}
+
+function SectionHeader({ kicker, title, description }: { kicker?: string; title: string; description?: string }) {
+  return (
+    <div className="mx-auto max-w-3xl text-center">
+      {kicker ? (
+        <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs font-medium tracking-wide text-muted-foreground">
+          <Sparkles className="h-3.5 w-3.5" />
+          <span>{kicker}</span>
+        </div>
+      ) : null}
+      <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">
+        {title}
+      </h2>
+      {description ? (
+        <p className="mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function BackgroundAuras({ reduceMotion }: { reduceMotion: boolean }) {
+  return (
+    <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_10%,hsl(var(--primary)/0.25),transparent_45%),radial-gradient(circle_at_80%_0%,hsl(var(--accent)/0.16),transparent_40%),radial-gradient(circle_at_50%_80%,rgba(255,255,255,0.07),transparent_55%)]" />
+
+      <motion.div
+        aria-hidden="true"
+        className="absolute -top-24 left-1/2 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-[radial-gradient(circle_at_40%_30%,rgba(255,255,255,0.18),transparent_55%)] blur-3xl"
+        animate={reduceMotion ? undefined : { y: [0, 26, 0], scale: [1, 1.03, 1] }}
+        transition={reduceMotion ? undefined : { duration: 12, repeat: Infinity, ease: "easeInOut" }}
+      />
+
+      <motion.div
+        aria-hidden="true"
+        className="absolute -bottom-40 left-[-10%] h-[520px] w-[520px] rounded-full bg-[radial-gradient(circle_at_50%_50%,hsl(var(--primary)/0.18),transparent_60%)] blur-3xl"
+        animate={reduceMotion ? undefined : { x: [0, 80, 0], y: [0, -30, 0] }}
+        transition={reduceMotion ? undefined : { duration: 18, repeat: Infinity, ease: "easeInOut" }}
+      />
+
+      <div className="absolute inset-0 noise-overlay opacity-[0.09] mix-blend-overlay mask-fade-y" />
+    </div>
+  );
+}
+
+function Hero({ t, reduceMotion }: { t: TFn; reduceMotion: boolean }) {
   return (
     <section className="relative overflow-hidden">
-      {/* Background gradient */}
+      <BackgroundAuras reduceMotion={reduceMotion} />
-      <div className="absolute inset-0 -z-10">
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-background" />
-        <div className="absolute inset-0 bg-[url(/grid.svg)] bg-cover opacity-10" />
-      </div>
 
-      <div className="container py-24 md:py-32 xl:py-40 2xl:py-48">
+      <div className="container py-20 sm:py-24 md:py-28">
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
+          initial={reduceMotion ? undefined : { opacity: 0, y: 16 }}
-          animate={{ opacity: 1, y: 0 }}
+          animate={reduceMotion ? undefined : { opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
-          className="mx-auto max-w-5xl text-center 2xl:max-w-6xl 3xl:max-w-7xl"
+          className="mx-auto max-w-4xl text-center"
         >
-          <Badge className="mb-4" variant="secondary">
+          <div className="mb-4 text-xs font-medium uppercase tracking-[0.22em] text-muted-foreground">
-            <Sparkles className="mr-1 h-3 w-3" />
+            {t("home.hero.kicker")}
-            AI-Powered Tools
+          </div>
-          </Badge>
+
-          <h1 className="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl">
+          <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl">
-            Build Games{" "}
+            {t("home.hero.title")}
-            <span className="bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500 bg-clip-text text-transparent">
-              Faster
-            </span>
           </h1>
-          <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+          <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
-            Transform your game development workflow with powerful AI tools. Video to frames,
+            {t("home.hero.description")}
-            image compression, audio processing, and more.
           </p>
-          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
+
-            <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
-              <Link href="/tools">
+            <Button asChild size="lg" className="rounded-full px-7">
-                Start Building <ArrowRight className="ml-2 h-4 w-4" />
+              <Link href="/tools/image-compress">
+                {t("home.hero.startBuilding")} <ArrowRight className="ml-1 h-4 w-4" />
               </Link>
             </Button>
-            <Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+
-              <Link href="/pricing">View Pricing</Link>
+            <Button asChild size="lg" variant="outline" className="rounded-full border-white/10 bg-white/[0.02] px-7 hover:bg-white/[0.04]">
+              <a href="#tools">
+                {t("home.hero.secondaryCta")} <ChevronDown className="ml-1 h-4 w-4" />
+              </a>
             </Button>
           </div>
 
-          {/* Stats */}
+          <p className="mt-6 text-xs text-muted-foreground">{t("home.hero.note")}</p>
-          <motion.div
+        </motion.div>
-            initial={{ opacity: 0, y: 20 }}
+
-            animate={{ opacity: 1, y: 0 }}
+        <motion.div
-            transition={{ duration: 0.5, delay: 0.2 }}
+          initial={reduceMotion ? undefined : { opacity: 0, y: 20 }}
-            className="mt-16 grid grid-cols-3 gap-8 md:gap-16 xl:gap-24 2xl:gap-32"
+          animate={reduceMotion ? undefined : { opacity: 1, y: 0 }}
-          >
+          transition={{ duration: 0.7, delay: 0.12, ease: [0.22, 1, 0.36, 1] }}
-            <div>
+          className="mx-auto mt-14 max-w-6xl"
-              <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">10K+</div>
+        >
-              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Developers</div>
+          <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] shadow-[0_1px_0_0_rgba(255,255,255,0.06)_inset]">
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(255,255,255,0.08),transparent_55%),radial-gradient(circle_at_80%_70%,hsl(var(--primary)/0.14),transparent_55%)]" />
+            <div className="relative p-6 sm:p-8">
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <span className="h-2 w-2 rounded-full bg-red-500/70" />
+                <span className="h-2 w-2 rounded-full bg-yellow-500/70" />
+                <span className="h-2 w-2 rounded-full bg-green-500/70" />
+                <span className="ml-3">{t("home.hero.previewTitle")}</span>
+              </div>
+
+              <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                {[
+                  {
+                    icon: Video,
+                    title: t("home.tools.videoToFrames.title"),
+                    description: t("home.tools.videoToFrames.description"),
+                    href: "/tools/video-frames",
+                    tint: "from-sky-500/20",
+                  },
+                  {
+                    icon: ImageIcon,
+                    title: t("home.tools.imageCompression.title"),
+                    description: t("home.tools.imageCompression.description"),
+                    href: "/tools/image-compress",
+                    tint: "from-violet-500/20",
+                  },
+                  {
+                    icon: Music,
+                    title: t("home.tools.audioCompression.title"),
+                    description: t("home.tools.audioCompression.description"),
+                    href: "/tools/audio-compress",
+                    tint: "from-emerald-500/20",
+                  },
+                  {
+                    icon: Layers,
+                    title: t("home.tools.textureAtlas.title"),
+                    description: t("home.tools.textureAtlas.description"),
+                    href: "/tools/texture-atlas",
+                    tint: "from-orange-500/20",
+                  },
+                ].map((tool) => (
+                  <motion.div
+                    key={tool.href}
+                    whileHover={reduceMotion ? undefined : { y: -6 }}
+                    transition={{ type: "spring", stiffness: 260, damping: 18 }}
+                  >
+                    <Link
+                      href={tool.href}
+                      className="group block h-full rounded-2xl border border-white/10 bg-black/20 p-5 backdrop-blur-xl transition-colors hover:bg-black/25"
+                    >
+                      <div className="relative">
+                        <div
+                          className={cn(
+                            "absolute -inset-5 rounded-3xl bg-gradient-to-br opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-100",
+                            tool.tint
+                          )}
+                        />
+                        <div className="relative flex items-start gap-3">
+                          <span className="grid h-10 w-10 place-items-center rounded-xl bg-white/[0.06] text-foreground shadow-[0_0_0_1px_rgba(255,255,255,0.08)]">
+                            <tool.icon className="h-5 w-5" />
+                          </span>
+                          <div className="min-w-0">
+                            <div className="truncate text-sm font-semibold tracking-tight">{tool.title}</div>
+                            <div className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+                              {tool.description}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+                        <span>{t("common.tryNow")}</span>
+                        <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" />
+                      </div>
+                    </Link>
+                  </motion.div>
+                ))}
+              </div>
+
+              <div className="mt-10 grid grid-cols-3 gap-6 text-center">
+                {[
+                  { value: "10K+", label: t("home.hero.stats.developers") },
+                  { value: "1M+", label: t("home.hero.stats.filesProcessed") },
+                  { value: "99.9%", label: t("home.hero.stats.uptime") },
+                ].map((item) => (
+                  <div key={item.label}>
+                    <div className="text-xl font-semibold tracking-tight sm:text-2xl">{item.value}</div>
+                    <div className="mt-1 text-xs text-muted-foreground">{item.label}</div>
+                  </div>
+                ))}
+              </div>
             </div>
-            <div>
+          </div>
-              <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">1M+</div>
-              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Files Processed</div>
-            </div>
-            <div>
-              <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">99.9%</div>
-              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Uptime</div>
-            </div>
-          </motion.div>
         </motion.div>
       </div>
     </section>
   );
 }
 
-function FeaturesSection() {
+function ToolsShowcase({ t, reduceMotion }: { t: TFn; reduceMotion: boolean }) {
-  return (
+  const items = [
-    <section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
+    {
-      <div className="container">
+      icon: Video,
-        <motion.div
+      title: t("home.tools.videoToFrames.title"),
-          initial={{ opacity: 0, y: 20 }}
+      description: t("home.tools.videoToFrames.description"),
-          whileInView={{ opacity: 1, y: 0 }}
+      href: "/tools/video-frames",
-          viewport={{ once: true }}
+      gradient: "from-sky-500/20 via-white/[0.03] to-transparent",
-          transition={{ duration: 0.5 }}
+    },
-          className="mb-16 text-center xl:mb-20 2xl:mb-24"
+    {
-        >
+      icon: ImageIcon,
-          <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+      title: t("home.tools.imageCompression.title"),
-            Everything You Need
+      description: t("home.tools.imageCompression.description"),
-          </h2>
+      href: "/tools/image-compress",
-          <p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+      gradient: "from-violet-500/20 via-white/[0.03] to-transparent",
-            Powerful tools designed specifically for game developers
+    },
-          </p>
+    {
-        </motion.div>
+      icon: Music,
+      title: t("home.tools.audioCompression.title"),
+      description: t("home.tools.audioCompression.description"),
+      href: "/tools/audio-compress",
+      gradient: "from-emerald-500/20 via-white/[0.03] to-transparent",
+    },
+    {
+      icon: Layers,
+      title: t("home.tools.textureAtlas.title"),
+      description: t("home.tools.textureAtlas.description"),
+      href: "/tools/texture-atlas",
+      gradient: "from-orange-500/20 via-white/[0.03] to-transparent",
+    },
+  ];
 
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 xl:gap-8 2xl:gap-10">
+  return (
-          {features.map((feature, index) => (
+    <section id="tools" className="border-t border-white/5 py-20 sm:py-24">
+      <div className="container">
+        <SectionHeader
+          kicker={t("home.showcase.kicker")}
+          title={t("home.showcase.title")}
+          description={t("home.showcase.description")}
+        />
+
+        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {items.map((item, index) => (
             <motion.div
-              key={feature.title}
+              key={item.href}
-              initial={{ opacity: 0, y: 20 }}
+              initial={reduceMotion ? undefined : { opacity: 0, y: 18 }}
-              whileInView={{ opacity: 1, y: 0 }}
+              whileInView={reduceMotion ? undefined : { opacity: 1, y: 0 }}
-              viewport={{ once: true }}
+              viewport={{ once: true, margin: "-120px" }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.6, delay: index * 0.08, ease: [0.22, 1, 0.36, 1] }}
             >
-              <Link href={feature.href}>
+              <Link href={item.href} className="group block h-full">
-                <Card className="h-full transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 xl:p-8 2xl:p-10">
+                <Card className="relative h-full overflow-hidden rounded-3xl border-white/10 bg-white/[0.02] p-6 transition-colors hover:bg-white/[0.03]">
-                  <CardHeader>
+                  <div className={cn("absolute inset-0 bg-gradient-to-b", item.gradient)} />
-                    <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 xl:h-14 xl:w-14 2xl:h-16 2xl:w-16">
+                  <div className="absolute inset-0 noise-overlay opacity-[0.06] mix-blend-overlay" />
-                      <feature.icon className="h-6 w-6 text-primary xl:h-7 xl:w-7 2xl:h-8 2xl:w-8" />
+
+                  <div className="relative">
+                    <div className="flex items-start justify-between gap-3">
+                      <span className="grid h-11 w-11 place-items-center rounded-2xl bg-white/[0.06] shadow-[0_0_0_1px_rgba(255,255,255,0.08)]">
+                        <item.icon className="h-5 w-5" />
+                      </span>
+                      <span className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-muted-foreground">
+                        {t("common.tryNow")}
+                      </span>
                     </div>
-                    <CardTitle className="text-xl xl:text-2xl 2xl:text-3xl">{feature.title}</CardTitle>
+
-                    <CardDescription className="text-base xl:text-lg 2xl:text-xl">{feature.description}</CardDescription>
+                    <h3 className="mt-6 text-lg font-semibold tracking-tight">{item.title}</h3>
-                  </CardHeader>
+                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{item.description}</p>
-                  <CardContent>
+
-                    <Button variant="ghost" size="sm" className="w-full xl:text-base 2xl:text-lg">
+                    <div className="mt-6 inline-flex items-center text-sm font-medium">
-                      Try it now <ArrowRight className="ml-2 h-4 w-4" />
+                      {t("home.showcase.cta")}
-                    </Button>
+                      <ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" />
-                  </CardContent>
+                    </div>
+                  </div>
                 </Card>
               </Link>
             </motion.div>
@@ -227,49 +309,60 @@ function FeaturesSection() {
   );
 }
 
-function BenefitsSection() {
+function Workflow({ t, reduceMotion }: { t: TFn; reduceMotion: boolean }) {
-  return (
+  const steps = [
-    <section className="py-24 xl:py-32 2xl:py-40">
+    {
-      <div className="container">
+      k: "01",
-        <div className="grid gap-12 lg:grid-cols-2 xl:gap-16 2xl:gap-20">
+      title: t("home.workflow.steps.step1.title"),
-          <motion.div
+      description: t("home.workflow.steps.step1.description"),
-            initial={{ opacity: 0, x: -20 }}
+      icon: Sparkles,
-            whileInView={{ opacity: 1, x: 0 }}
+    },
-            viewport={{ once: true }}
+    {
-            transition={{ duration: 0.5 }}
+      k: "02",
-          >
+      title: t("home.workflow.steps.step2.title"),
-            <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+      description: t("home.workflow.steps.step2.description"),
-              Why Choose Mini Game AI?
+      icon: Zap,
-            </h2>
+    },
-            <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+    {
-              We understand the unique challenges of game development. Our tools are built to help
+      k: "03",
-              you work faster and smarter.
+      title: t("home.workflow.steps.step3.title"),
-            </p>
+      description: t("home.workflow.steps.step3.description"),
-            <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+      icon: ShieldCheck,
-              <Link href="/about">Learn More About Us</Link>
+    },
-            </Button>
+  ];
-          </motion.div>
 
-          <div className="space-y-6 xl:space-y-8">
+  return (
-            {benefits.map((benefit, index) => (
+    <section className="py-20 sm:py-24">
+      <div className="container">
+        <div className="grid gap-10 lg:grid-cols-[1fr_1.1fr] lg:items-start">
+          <div>
+            <SectionHeader title={t("home.workflow.title")} description={t("home.workflow.description")} />
+          </div>
+
+          <div className="space-y-4">
+            {steps.map((s, idx) => (
               <motion.div
-                key={benefit.title}
+                key={s.k}
-                initial={{ opacity: 0, x: 20 }}
+                initial={reduceMotion ? undefined : { opacity: 0, x: 14 }}
-                whileInView={{ opacity: 1, x: 0 }}
+                whileInView={reduceMotion ? undefined : { opacity: 1, x: 0 }}
-                viewport={{ once: true }}
+                viewport={{ once: true, margin: "-120px" }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.55, delay: idx * 0.06, ease: [0.22, 1, 0.36, 1] }}
               >
-                <Card className="xl:p-8 2xl:p-10">
+                <div className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.02] p-6">
-                  <CardContent className="flex gap-4 p-6 xl:gap-6 2xl:gap-8">
+                  <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.06),transparent_55%)] opacity-70" />
-                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 xl:h-14 xl:w-14 2xl:h-16 2xl:w-16">
+                  <div className="absolute inset-0 noise-overlay opacity-[0.06] mix-blend-overlay" />
-                      <benefit.icon className="h-6 w-6 text-primary xl:h-7 xl:w-7 2xl:h-8 2xl:w-8" />
+
+                  <div className="relative flex items-start gap-4">
+                    <div className="flex h-12 w-12 shrink-0 flex-col items-center justify-center rounded-2xl bg-white/[0.06] text-foreground shadow-[0_0_0_1px_rgba(255,255,255,0.08)]">
+                      <div className="text-xs font-semibold tracking-[0.22em] text-muted-foreground">{s.k}</div>
+                      <s.icon className="mt-1 h-4 w-4" />
                     </div>
-                    <div>
+                    <div className="min-w-0">
-                      <h3 className="mb-2 text-lg font-semibold xl:text-xl 2xl:text-2xl">{benefit.title}</h3>
+                      <div className="text-base font-semibold tracking-tight">{s.title}</div>
-                      <p className="text-muted-foreground text-sm md:text-base xl:text-lg 2xl:text-xl">{benefit.description}</p>
+                      <div className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.description}</div>
                     </div>
-                  </CardContent>
+                  </div>
-                </Card>
+                </div>
               </motion.div>
             ))}
           </div>
@@ -279,63 +372,49 @@ function BenefitsSection() {
   );
 }
 
-function PricingSection() {
+function Quality({ t, reduceMotion }: { t: TFn; reduceMotion: boolean }) {
-  return (
+  const items = [
-    <section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
+    {
-      <div className="container">
+      icon: Zap,
-        <motion.div
+      title: t("home.quality.items.fast.title"),
-          initial={{ opacity: 0, y: 20 }}
+      description: t("home.quality.items.fast.description"),
-          whileInView={{ opacity: 1, y: 0 }}
+    },
-          viewport={{ once: true }}
+    {
-          transition={{ duration: 0.5 }}
+      icon: ShieldCheck,
-          className="mb-16 text-center xl:mb-20 2xl:mb-24"
+      title: t("home.quality.items.private.title"),
-        >
+      description: t("home.quality.items.private.description"),
-          <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+    },
-            Simple, Transparent Pricing
+    {
-          </h2>
+      icon: Sparkles,
-          <p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+      title: t("home.quality.items.designed.title"),
-            Start free, scale as you grow. No hidden fees.
+      description: t("home.quality.items.designed.description"),
-          </p>
+    },
-        </motion.div>
+  ];
 
-        <div className="grid gap-8 md:grid-cols-3 xl:gap-10 2xl:gap-12">
+  return (
-          {pricingPlans.map((plan, index) => (
+    <section className="border-t border-white/5 py-20 sm:py-24">
+      <div className="container">
+        <SectionHeader title={t("home.quality.title")} description={t("home.quality.description")} />
+
+        <div className="mt-12 grid gap-6 md:grid-cols-3">
+          {items.map((item, idx) => (
             <motion.div
-              key={plan.name}
+              key={item.title}
-              initial={{ opacity: 0, y: 20 }}
+              initial={reduceMotion ? undefined : { opacity: 0, y: 14 }}
-              whileInView={{ opacity: 1, y: 0 }}
+              whileInView={reduceMotion ? undefined : { opacity: 1, y: 0 }}
-              viewport={{ once: true }}
+              viewport={{ once: true, margin: "-120px" }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.55, delay: idx * 0.06, ease: [0.22, 1, 0.36, 1] }}
             >
-              <Card className={`relative h-full ${plan.popular ? "border-primary" : ""} xl:p-8 2xl:p-10`}>
+              <Card className="h-full rounded-3xl border-white/10 bg-white/[0.02] p-6">
-                {plan.popular && (
+                <div className="flex items-start gap-4">
-                  <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 xl:text-base 2xl:text-lg">
+                  <div className="grid h-11 w-11 place-items-center rounded-2xl bg-white/[0.06] shadow-[0_0_0_1px_rgba(255,255,255,0.08)]">
-                    Most Popular
+                    <item.icon className="h-5 w-5" />
-                  </Badge>
-                )}
-                <CardHeader>
-                  <CardTitle className="text-xl xl:text-2xl 2xl:text-3xl">{plan.name}</CardTitle>
-                  <CardDescription className="text-base xl:text-lg 2xl:text-xl">{plan.description}</CardDescription>
-                  <div className="mt-4">
-                    <span className="text-4xl font-bold xl:text-5xl 2xl:text-6xl">{plan.price}</span>
-                    {plan.period && (
-                      <span className="text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{plan.period}</span>
-                    )}
                   </div>
-                </CardHeader>
+                  <div>
-                <CardContent className="space-y-4">
+                    <div className="text-base font-semibold tracking-tight">{item.title}</div>
-                  <ul className="space-y-3">
+                    <div className="mt-2 text-sm leading-relaxed text-muted-foreground">{item.description}</div>
-                    {plan.features.map((feature) => (
+                  </div>
-                      <li key={feature} className="flex items-start gap-2">
+                </div>
-                        <Check className="h-5 w-5 shrink-0 text-primary xl:h-6 xl:w-6 2xl:h-7 2xl:w-7" />
-                        <span className="text-sm md:text-base xl:text-lg 2xl:text-xl">{feature}</span>
-                      </li>
-                    ))}
-                  </ul>
-                  <Button className="w-full xl:text-lg xl:py-6 2xl:text-xl 2xl:py-7" variant={plan.popular ? "default" : "outline"} asChild>
-                    <Link href={plan.href}>{plan.cta}</Link>
-                  </Button>
-                </CardContent>
               </Card>
             </motion.div>
           ))}
@@ -345,30 +424,36 @@ function PricingSection() {
   );
 }
 
-function CTASection() {
+function FinalCTA({ t, reduceMotion }: { t: TFn; reduceMotion: boolean }) {
   return (
-    <section className="py-24 xl:py-32 2xl:py-40">
+    <section className="py-20 sm:py-24">
       <div className="container">
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
+          initial={reduceMotion ? undefined : { opacity: 0, y: 16 }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={reduceMotion ? undefined : { opacity: 1, y: 0 }}
-          viewport={{ once: true }}
+          viewport={{ once: true, margin: "-120px" }}
-          transition={{ duration: 0.5 }}
+          transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
-          className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/20 via-primary/10 to-background p-12 text-center md:p-20 xl:p-24 2xl:p-32"
+          className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.03] p-10 sm:p-12"
         >
-          <div className="relative z-10">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,hsl(var(--primary)/0.22),transparent_55%),radial-gradient(circle_at_80%_70%,rgba(255,255,255,0.08),transparent_55%)]" />
-            <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+          <div className="absolute inset-0 noise-overlay opacity-[0.09] mix-blend-overlay" />
-              Ready to Level Up?
+
+          <div className="relative mx-auto max-w-2xl text-center">
+            <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
+              {t("home.final.title")}
             </h2>
-            <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+            <p className="mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg">
-              Join thousands of game developers building amazing games with our tools.
+              {t("home.final.description")}
             </p>
-            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
+
-              <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
-                <Link href="/register">Get Started for Free</Link>
+              <Button asChild size="lg" className="rounded-full px-7">
+                <Link href="/tools/image-compress">
+                  {t("home.final.primaryCta")} <ArrowRight className="ml-1 h-4 w-4" />
+                </Link>
               </Button>
-              <Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+              <Button asChild size="lg" variant="outline" className="rounded-full border-white/10 bg-white/[0.02] px-7 hover:bg-white/[0.04]">
-                <Link href="/contact">Contact Sales</Link>
+                <Link href="/tools/video-frames">{t("home.final.secondaryCta")}</Link>
               </Button>
             </div>
           </div>
@@ -379,13 +464,16 @@ function CTASection() {
 }
 
 export default function HomePage() {
+  const t = useStableT();
+  const reduceMotion = useReducedMotion() ?? false;
+
   return (
-    <>
+    <div className="relative">
-      <HeroSection />
+      <Hero t={t} reduceMotion={reduceMotion} />
-      <FeaturesSection />
+      <ToolsShowcase t={t} reduceMotion={reduceMotion} />
-      <BenefitsSection />
+      <Workflow t={t} reduceMotion={reduceMotion} />
-      <PricingSection />
+      <Quality t={t} reduceMotion={reduceMotion} />
-      <CTASection />
+      <FinalCTA t={t} reduceMotion={reduceMotion} />
-    </>
+    </div>
   );
 }

src/components/layout/Footer.tsx

@@ -1,143 +1,105 @@
+"use client";
+
 import Link from "next/link";
-import { Sparkles, Github, Twitter } from "lucide-react";
+import { usePathname } from "next/navigation";
-
+import { Sparkles } from "lucide-react";
-const footerLinks = {
+import { useEffect, useMemo, useState } from "react";
-  product: [
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
-    { name: "Features", href: "/features" },
+import { cn } from "@/lib/utils";
-    { name: "Pricing", href: "/pricing" },
-    { name: "API", href: "/api" },
-    { name: "Documentation", href: "/docs" },
-  ],
-  tools: [
-    { name: "Video to Frames", href: "/tools/video-frames" },
-    { name: "Image Compression", href: "/tools/image-compress" },
-    { name: "Audio Compression", href: "/tools/audio-compress" },
-    { name: "AI Tools", href: "/tools/ai-tools" },
-  ],
-  company: [
-    { name: "About", href: "/about" },
-    { name: "Blog", href: "/blog" },
-    { name: "Careers", href: "/careers" },
-    { name: "Contact", href: "/contact" },
-  ],
-  legal: [
-    { name: "Privacy", href: "/privacy" },
-    { name: "Terms", href: "/terms" },
-    { name: "Cookie Policy", href: "/cookies" },
-  ],
-};
-
-const socialLinks = [
-  { name: "Twitter", icon: Twitter, href: "https://twitter.com" },
-  { name: "GitHub", icon: Github, href: "https://github.com" },
-];
 
 export function Footer() {
+  const pathname = usePathname();
+  const [mounted, setMounted] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => setMounted(true), []);
+
+  const getT = (key: string, params?: Record<string, string | number>) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
+  };
+
+  const toolLinks = useMemo(
+    () => [
+      { name: getT("sidebar.videoToFrames"), href: "/tools/video-frames" },
+      { name: getT("sidebar.imageCompression"), href: "/tools/image-compress" },
+      { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress" },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mounted]
+  );
+
+  // Check if we're in the dashboard area (tools pages)
+  const isDashboard = pathname?.startsWith("/tools");
+
   return (
-    <footer className="border-t border-border/40 bg-background/50">
+    <footer className={cn(
-      <div className="container py-12 md:py-16">
+      "border-t border-white/5 bg-background/50",
-        <div className="grid grid-cols-2 gap-8 md:grid-cols-6">
+      isDashboard && "lg:ml-64"
-          {/* Brand */}
+    )}>
-          <div className="col-span-2">
+      <div className="container py-12">
-            <Link href="/" className="flex items-center space-x-2">
+        <div className="grid gap-10 md:grid-cols-[1.5fr_1fr]">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+          <div>
-                <Sparkles className="h-5 w-5 text-primary-foreground" />
+            <Link href="/" className="inline-flex items-center gap-2">
-              </div>
+              <span className="grid h-9 w-9 place-items-center rounded-xl bg-primary text-primary-foreground shadow-[0_0_0_1px_rgba(255,255,255,0.1)]">
-              <span className="text-xl font-bold">Mini Game AI</span>
+                <Sparkles className="h-5 w-5" />
+              </span>
+              <span className="text-base font-semibold tracking-tight">{getT("common.appName")}</span>
             </Link>
-            <p className="mt-4 text-sm text-muted-foreground">
+
-              AI-powered tools for mini game developers. Process media files with ease.
+            <p className="mt-4 max-w-md text-sm leading-relaxed text-muted-foreground">
+              {getT("footer.tagline")}
+            </p>
+
+            <p className="mt-6 text-xs text-muted-foreground">
+              {getT("footer.note")}
             </p>
           </div>
 
-          {/* Product */}
+          <div className="grid grid-cols-2 gap-8">
-          <div>
+            <div>
-            <h3 className="mb-4 text-sm font-semibold">Product</h3>
+              <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            <ul className="space-y-3 text-sm">
+                {getT("footer.sections.tools")}
-              {footerLinks.product.map((link) => (
+              </div>
-                <li key={link.name}>
+              <ul className="mt-4 space-y-2 text-sm">
-                  <Link
+                {toolLinks.map((link) => (
-                    href={link.href}
+                  <li key={link.href}>
-                    className="text-muted-foreground transition-colors hover:text-foreground"
+                    <Link href={link.href} className="text-muted-foreground hover:text-foreground">
-                  >
+                      {link.name}
-                    {link.name}
+                    </Link>
-                  </Link>
+                  </li>
-                </li>
+                ))}
-              ))}
+              </ul>
-            </ul>
+            </div>
-          </div>
 
-          {/* Tools */}
+            <div>
-          <div>
+              <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            <h3 className="mb-4 text-sm font-semibold">Tools</h3>
+                {getT("footer.sections.company")}
-            <ul className="space-y-3 text-sm">
+              </div>
-              {footerLinks.tools.map((link) => (
+              <ul className="mt-4 space-y-2 text-sm">
-                <li key={link.name}>
+                <li>
-                  <Link
+                  <Link href="/" className="text-muted-foreground hover:text-foreground">
-                    href={link.href}
+                    {getT("footer.links.home")}
-                    className="text-muted-foreground transition-colors hover:text-foreground"
-                  >
-                    {link.name}
                   </Link>
                 </li>
-              ))}
+              </ul>
-            </ul>
+            </div>
-          </div>
-
-          {/* Company */}
-          <div>
-            <h3 className="mb-4 text-sm font-semibold">Company</h3>
-            <ul className="space-y-3 text-sm">
-              {footerLinks.company.map((link) => (
-                <li key={link.name}>
-                  <Link
-                    href={link.href}
-                    className="text-muted-foreground transition-colors hover:text-foreground"
-                  >
-                    {link.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Legal */}
-          <div>
-            <h3 className="mb-4 text-sm font-semibold">Legal</h3>
-            <ul className="space-y-3 text-sm">
-              {footerLinks.legal.map((link) => (
-                <li key={link.name}>
-                  <Link
-                    href={link.href}
-                    className="text-muted-foreground transition-colors hover:text-foreground"
-                  >
-                    {link.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
           </div>
         </div>
 
-        {/* Bottom section */}
+        <div className="mt-10 border-t border-white/5 pt-6">
-        <div className="mt-12 flex flex-col items-center justify-between border-t border-border/40 pt-8 md:flex-row">
+          <div className="flex flex-col items-center justify-center gap-2 text-center">
-          <p className="text-sm text-muted-foreground">
+            <p className="text-xs text-muted-foreground">
-            © {new Date().getFullYear()} Mini Game AI. All rights reserved.
+              © {new Date().getFullYear()} {getT("common.appName")}. {getT("footer.copyright")}
-          </p>
+            </p>
-          <div className="mt-4 flex space-x-6 md:mt-0">
+            <Link
-            {socialLinks.map((link) => {
+              href="https://beian.miit.gov.cn"
-              const Icon = link.icon;
+              target="_blank"
-              return (
+              rel="noopener noreferrer"
-                <Link
+              className="text-xs text-muted-foreground hover:text-foreground"
-                  key={link.name}
+            >
-                  href={link.href}
+              粤ICP备2021179543号
-                  className="text-muted-foreground transition-colors hover:text-foreground"
+            </Link>
-                  aria-label={link.name}
-                >
-                  <Icon className="h-5 w-5" />
-                </Link>
-              );
-            })}
           </div>
         </div>
       </div>

src/components/layout/Header.tsx

@@ -2,104 +2,136 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Menu, X, Sparkles } from "lucide-react";
+import { ArrowRight, Menu, X, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
-const navItems = [
-  { name: "Tools", href: "/tools" },
-  { name: "Pricing", href: "/pricing" },
-  { name: "Docs", href: "/docs" },
-  { name: "About", href: "/about" },
-];
-
 export function Header() {
   const pathname = usePathname();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const { t, locale, setLocale } = useTranslation();
+
+  useEffect(() => {
+    setMounted(true);
+
+    // Auto detect language on first mount if not manually set
+    const stored = localStorage.getItem("locale-storage");
+    if (!stored) {
+      const lang = navigator.language.toLowerCase();
+      if (lang.includes("zh")) setLocale("zh");
+    }
+  }, [setLocale]);
+
+  useEffect(() => {
+    if (!mounted) return;
+    document.documentElement.lang = locale;
+  }, [locale, mounted]);
+
+  // Prevent hydration mismatch by rendering a stable version initially
+  const displayT = (key: string, params?: Record<string, string | number>) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
+  };
+
+  const navItems = useMemo(
+    () => [
+      { name: displayT("sidebar.videoToFrames"), href: "/tools/video-frames" },
+      { name: displayT("sidebar.imageCompression"), href: "/tools/image-compress" },
+      { name: displayT("sidebar.audioCompression"), href: "/tools/audio-compress" },
+      { name: displayT("sidebar.textureAtlas"), href: "/tools/texture-atlas" },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mounted, locale]
+  );
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="sticky top-0 z-50 w-full border-b border-white/5 bg-background/70 backdrop-blur-xl supports-[backdrop-filter]:bg-background/50">
       <nav className="container flex h-16 items-center justify-between">
-        {/* Logo */}
+        <Link href="/" className="group flex items-center gap-2">
-        <Link href="/" className="flex items-center space-x-2">
+          <span className="relative grid h-9 w-9 place-items-center rounded-xl bg-primary text-primary-foreground shadow-[0_0_0_1px_rgba(255,255,255,0.1)]">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+            <Sparkles className="h-5 w-5" />
-            <Sparkles className="h-5 w-5 text-primary-foreground" />
+            <span className="pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-500 group-hover:opacity-100 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.35),transparent_60%)]" />
-          </div>
+          </span>
-          <span className="text-xl font-bold">Mini Game AI</span>
+          <span className="text-base font-semibold tracking-tight">{displayT("common.appName")}</span>
         </Link>
 
-        {/* Desktop Navigation */}
+        <div className="hidden md:flex items-center gap-1">
-        <div className="hidden md:flex md:items-center md:space-x-6">
+          {navItems.map((item) => {
-          {navItems.map((item) => (
+            const active = pathname === item.href || pathname?.startsWith(item.href + "/");
-            <Link
+            return (
-              key={item.name}
+              <Link
-              href={item.href}
+                key={item.href}
-              className={cn(
+                href={item.href}
-                "text-sm font-medium transition-colors hover:text-primary",
+                className={cn(
-                pathname === item.href ? "text-primary" : "text-muted-foreground"
+                  "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
-              )}
+                  active
-            >
+                    ? "bg-white/8 text-foreground"
-              {item.name}
+                    : "text-muted-foreground hover:bg-white/5 hover:text-foreground"
+                )}
+              >
+                {item.name}
+              </Link>
+            );
+          })}
+        </div>
+
+        <div className="hidden md:flex items-center gap-2">
+          {mounted && <LanguageSwitcher />}
+          <Button asChild size="sm" className="rounded-full px-4">
+            <Link href="/tools/image-compress">
+              {displayT("common.startBuilding")} <ArrowRight className="ml-1 h-4 w-4" />
             </Link>
-          ))}
-        </div>
-
-        {/* CTA Buttons */}
-        <div className="hidden md:flex md:items-center md:space-x-4">
-          <Button variant="ghost" size="sm" asChild>
-            <Link href="/login">Sign In</Link>
-          </Button>
-          <Button size="sm" asChild>
-            <Link href="/register">Get Started</Link>
           </Button>
         </div>
 
-        {/* Mobile Menu Button */}
         <button
-          className="md:hidden"
+          className="md:hidden rounded-full p-2 hover:bg-white/5"
           onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-          aria-label="Toggle menu"
+          aria-label={displayT("common.toggleMenu")}
         >
-          {isMobileMenuOpen ? (
+          {isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-            <X className="h-6 w-6" />
-          ) : (
-            <Menu className="h-6 w-6" />
-          )}
         </button>
       </nav>
 
-      {/* Mobile Menu */}
       <AnimatePresence>
         {isMobileMenuOpen && (
           <motion.div
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.2 }}
+            transition={{ duration: 0.18 }}
-            className="md:hidden border-t border-border/40"
+            className="md:hidden border-t border-white/5"
           >
-            <div className="container space-y-4 py-6">
+            <div className="container py-5">
-              {navItems.map((item) => (
+              <div className="flex flex-col gap-2">
-                <Link
+                {navItems.map((item) => (
-                  key={item.name}
+                  <Link
-                  href={item.href}
+                    key={item.href}
-                  onClick={() => setIsMobileMenuOpen(false)}
+                    href={item.href}
-                  className={cn(
+                    onClick={() => setIsMobileMenuOpen(false)}
-                    "block text-sm font-medium transition-colors hover:text-primary",
+                    className={cn(
-                    pathname === item.href ? "text-primary" : "text-muted-foreground"
+                      "rounded-xl px-3 py-2 text-sm font-medium transition-colors",
-                  )}
+                      pathname === item.href
-                >
+                        ? "bg-white/8 text-foreground"
-                  {item.name}
+                        : "text-muted-foreground hover:bg-white/5 hover:text-foreground"
-                </Link>
+                    )}
-              ))}
+                  >
-              <div className="flex flex-col space-y-2 pt-4">
+                    {item.name}
-                <Button variant="ghost" size="sm" asChild className="w-full">
+                  </Link>
-                  <Link href="/login">Sign In</Link>
+                ))}
-                </Button>
+              </div>
-                <Button size="sm" asChild className="w-full">
+
-                  <Link href="/register">Get Started</Link>
+              <div className="mt-4 flex items-center justify-between">
+                {mounted && <LanguageSwitcher />}
+                <Button asChild size="sm" className="rounded-full px-4">
+                  <Link href="/tools/image-compress" onClick={() => setIsMobileMenuOpen(false)}>
+                    {displayT("common.startBuilding")} <ArrowRight className="ml-1 h-4 w-4" />
+                  </Link>
                 </Button>
               </div>
             </div>

src/components/layout/LanguageSwitcher.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTranslation, type Locale } from "@/lib/i18n";
+import { Check, Globe } from "lucide-react";
+
+export function LanguageSwitcher() {
+  const { locale, setLocale, locales } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const handleLocaleChange = (newLocale: Locale) => {
+    setLocale(newLocale);
+    setOpen(false);
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="gap-2">
+          <Globe className="h-4 w-4" />
+          <span className="hidden lg:inline">{locales[locale].name}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[120px]">
+        {Object.entries(locales).map(([key, { name }]) => (
+          <DropdownMenuItem
+            key={key}
+            onClick={() => handleLocaleChange(key as Locale)}
+            className="flex cursor-pointer items-center justify-between gap-2"
+          >
+            <span className="flex items-center gap-2">
+              <span>{name}</span>
+            </span>
+            {locale === key && (
+              <Check className="h-4 w-4 text-primary" />
+            )}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -7,43 +7,41 @@ import {
   Video,
   Image,
   Music,
-  Sparkles,
   LayoutDashboard,
-  CreditCard,
+  Layers,
-  Settings,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
+import { useState, useEffect } from "react";
 
-const sidebarNavItems = [
+function useSidebarNavItems() {
-  {
+  const [mounted, setMounted] = useState(false);
-    title: "Dashboard",
+  useEffect(() => setMounted(true), []);
-    items: [
+  const { t } = useTranslation();
-      { name: "Overview", href: "/dashboard", icon: LayoutDashboard },
+
-    ],
+  const getT = (key: string) => {
-  },
+    if (!mounted) return getServerTranslations("en").t(key);
-  {
+    return t(key);
-    title: "Tools",
+  };
-    items: [
+
-      { name: "Video to Frames", href: "/tools/video-frames", icon: Video },
+  return [
-      { name: "Image Compression", href: "/tools/image-compress", icon: Image },
+    {
-      { name: "Audio Compression", href: "/tools/audio-compress", icon: Music },
+      title: getT("nav.dashboard"),
-    ],
+      items: [
-  },
+        { name: getT("nav.overview"), href: "/", icon: LayoutDashboard },
-  {
+      ],
-    title: "AI Tools",
+    },
-    items: [
+    {
-      { name: "AI Image", href: "/tools/ai-image", icon: Sparkles },
+      title: getT("sidebar.tools"),
-      { name: "AI Audio", href: "/tools/ai-audio", icon: Sparkles },
+      items: [
-    ],
+        { name: getT("sidebar.videoToFrames"), href: "/tools/video-frames", icon: Video },
-  },
+        { name: getT("sidebar.imageCompression"), href: "/tools/image-compress", icon: Image },
-  {
+        { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress", icon: Music },
-    title: "Account",
+        { name: getT("sidebar.textureAtlas"), href: "/tools/texture-atlas", icon: Layers },
-    items: [
+      ],
-      { name: "Pricing", href: "/pricing", icon: CreditCard },
+    },
-      { name: "Settings", href: "/settings", icon: Settings },
+  ];
-    ],
+}
-  },
-];
 
 interface SidebarProps {
   className?: string;
@@ -51,6 +49,7 @@ interface SidebarProps {
 
 export function Sidebar({ className }: SidebarProps) {
   const pathname = usePathname();
+  const sidebarNavItems = useSidebarNavItems();
 
   return (
     <aside
@@ -61,7 +60,9 @@ export function Sidebar({ className }: SidebarProps) {
     >
       <div className="h-full overflow-y-auto py-6 pr-4">
         <nav className="space-y-8 px-4">
-          {sidebarNavItems.map((section) => (
+          {sidebarNavItems
+            .filter((section) => section.items.length > 0)
+            .map((section) => (
             <div key={section.title}>
               <h3 className="mb-4 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 {section.title}

src/components/tools/ConfigPanel.tsx

@@ -6,14 +6,17 @@ import { Slider } from "@/components/ui/slider";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
+import { useSafeTranslation } from "@/lib/i18n";
+
+export type ConfigValue = string | number | boolean | undefined;
 
 export interface ConfigOption {
   id: string;
   type: "slider" | "select" | "toggle" | "radio";
   label: string;
   description?: string;
-  value: any;
+  value: ConfigValue;
-  options?: { label: string; value: any }[];
+  options?: { label: string; value: ConfigValue }[];
   min?: number;
   max?: number;
   step?: number;
@@ -25,7 +28,7 @@ interface ConfigPanelProps {
   title: string;
   description?: string;
   options: ConfigOption[];
-  onChange: (id: string, value: any) => void;
+  onChange: (id: string, value: ConfigValue) => void;
   onReset?: () => void;
   className?: string;
 }
@@ -38,6 +41,8 @@ export function ConfigPanel({
   onReset,
   className,
 }: ConfigPanelProps) {
+  const { t } = useSafeTranslation();
+
   return (
     <Card className={className}>
       <CardHeader>
@@ -50,7 +55,7 @@ export function ConfigPanel({
           </div>
           {onReset && (
             <Button variant="ghost" size="sm" onClick={onReset}>
-              Reset
+              {t("common.reset")}
             </Button>
           )}
         </div>
@@ -83,7 +88,7 @@ export function ConfigPanel({
                 min={option.min ?? 0}
                 max={option.max ?? 100}
                 step={option.step ?? 1}
-                value={[option.value]}
+                value={[typeof option.value === "number" ? option.value : 0]}
                 onValueChange={(values: number[]) => onChange(option.id, values[0])}
                 className="mt-2"
               />
@@ -93,7 +98,7 @@ export function ConfigPanel({
               <div className="flex flex-wrap gap-2">
                 {option.options.map((opt) => (
                   <Button
-                    key={opt.value}
+                    key={String(opt.value)}
                     variant={option.value === opt.value ? "default" : "outline"}
                     size="sm"
                     onClick={() => onChange(option.id, opt.value)}
@@ -108,7 +113,7 @@ export function ConfigPanel({
               <div className="space-y-2">
                 {option.options.map((opt) => (
                   <label
-                    key={opt.value}
+                    key={String(opt.value)}
                     className={cn(
                       "flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-accent",
                       option.value === opt.value && "border-primary bg-primary/10"
@@ -117,7 +122,7 @@ export function ConfigPanel({
                     <input
                       type="radio"
                       name={option.id}
-                      value={opt.value}
+                      value={String(opt.value)}
                       checked={option.value === opt.value}
                       onChange={() => onChange(option.id, opt.value)}
                       className="h-4 w-4"

src/components/tools/FileUploader.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { formatFileSize, getFileExtension } from "@/lib/utils";
+import { useSafeTranslation } from "@/lib/i18n";
 import type { UploadedFile } from "@/types";
 
 interface FileUploaderProps {
@@ -35,6 +36,8 @@ export function FileUploader({
   maxFiles = 10,
   disabled = false,
 }: FileUploaderProps) {
+  const { t, plural } = useSafeTranslation();
+
   const onDrop = useCallback(
     (acceptedFiles: File[]) => {
       if (disabled) return;
@@ -85,14 +88,17 @@ export function FileUploader({
           <div className="mt-4">
             <p className="text-lg font-medium">
               {isDragActive
-                ? "Drop your files here"
+                ? t("uploader.dropActive")
                 : isDragReject
-                  ? "File type not accepted"
+                  ? t("uploader.fileRejected")
-                  : "Drag & drop files here"}
+                  : t("uploader.dropFiles")}
             </p>
             <p className="mt-2 text-sm text-muted-foreground">
-              or click to browse • Max {formatFileSize(maxSize)} • Up to {maxFiles} file
+              {t("uploader.browseFiles", {
-              {maxFiles > 1 ? "s" : ""}
+                maxSize: formatFileSize(maxSize),
+                maxFiles,
+                file: plural("uploader.file", maxFiles),
+              })}
             </p>
           </div>
         </motion.div>

src/components/tools/ImageCompareSlider.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { cn, formatFileSize } from "@/lib/utils";
+import { Eye, EyeOff } from "lucide-react";
+
+interface ImageCompareSliderProps {
+  originalSrc: string;
+  compressedSrc: string;
+  originalSize?: number;
+  compressedSize?: number;
+  className?: string;
+  // Translation texts
+  texts: {
+    original: string;
+    compressed: string;
+    dragHint: string;
+  };
+}
+
+export function ImageCompareSlider({
+  originalSrc,
+  compressedSrc,
+  originalSize,
+  compressedSize,
+  className,
+  texts,
+}: ImageCompareSliderProps) {
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const updateSliderPosition = useCallback((clientX: number) => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+    setSliderPosition(percentage);
+  }, []);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setIsDragging(true);
+    updateSliderPosition(e.clientX);
+  };
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (isDragging) {
+        e.preventDefault();
+        updateSliderPosition(e.clientX);
+      }
+    },
+    [isDragging, updateSliderPosition]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setIsDragging(true);
+    updateSliderPosition(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = useCallback(
+    (e: TouchEvent) => {
+      if (isDragging) {
+        e.preventDefault();
+        updateSliderPosition(e.touches[0].clientX);
+      }
+    },
+    [isDragging, updateSliderPosition]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchmove", handleTouchMove, { passive: false });
+      document.addEventListener("touchend", handleTouchEnd);
+
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative overflow-hidden rounded-lg bg-muted/50 select-none",
+        isDragging && "cursor-col-resize",
+        className
+      )}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+    >
+      {/* Original Image (Background - Left Side) */}
+      <div className="relative w-full">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={originalSrc}
+          alt={texts.original}
+          className="w-full h-auto object-contain max-h-[60vh] block"
+          draggable={false}
+        />
+      </div>
+
+      {/* Compressed Image (Foreground - Right Side with Clipping) */}
+      <div
+        className="absolute inset-0 overflow-hidden pointer-events-none"
+        style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={compressedSrc}
+          alt={texts.compressed}
+          className="w-full h-full object-contain max-h-[60vh]"
+          draggable={false}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </div>
+
+      {/* Slider Handle */}
+      <div
+        className="absolute top-0 bottom-0 w-0.5 bg-white cursor-col-resize pointer-events-none"
+        style={{ left: `${sliderPosition}%` }}
+      >
+        {/* Handle Button */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-lg flex items-center justify-center pointer-events-auto">
+          <div className="flex items-center gap-0.5">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 2L8 6L4 10"
+                stroke="#1a1a1a"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 2L4 6L8 10"
+                stroke="#1a1a1a"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      {/* Labels */}
+      <div className="absolute top-3 left-3 flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/60 backdrop-blur-sm text-white text-xs font-medium">
+        <Eye className="h-3.5 w-3.5" />
+        <span>{texts.original}</span>
+        {originalSize && <span className="text-white/70">({formatFileSize(originalSize)})</span>}
+      </div>
+
+      <div className="absolute top-3 right-3 flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-primary/80 backdrop-blur-sm text-primary-foreground text-xs font-medium">
+        <EyeOff className="h-3.5 w-3.5" />
+        <span>{texts.compressed}</span>
+        {compressedSize && (
+          <span className="text-primary-foreground/80">({formatFileSize(compressedSize)})</span>
+        )}
+      </div>
+
+      {/* Hint text */}
+      <div className="absolute bottom-3 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-full bg-black/50 backdrop-blur-sm text-white/70 text-xs">
+        {texts.dragHint}
+      </div>
+    </div>
+  );
+}

src/components/tools/ProgressBar.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { CheckCircle2, XCircle, Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useSafeTranslation } from "@/lib/i18n";
 import type { ProcessingProgress } from "@/types";
 
 interface ProgressBarProps {
@@ -29,6 +30,7 @@ const statusColors = {
 };
 
 export function ProgressBar({ progress, className }: ProgressBarProps) {
+  const { t } = useSafeTranslation();
   const { status, progress: value, message, error } = progress;
   const showProgress = status === "uploading" || status === "processing";
   const Icon = statusIcons[status];
@@ -46,11 +48,11 @@ export function ProgressBar({ progress, className }: ProgressBarProps) {
                   statusColors[status]
                 )}
               >
-                {status === "idle" && "Ready to process"}
+                {status === "idle" && t("progress.status.idle")}
-                {status === "uploading" && "Uploading..."}
+                {status === "uploading" && t("progress.status.uploading")}
-                {status === "processing" && "Processing..."}
+                {status === "processing" && t("progress.status.processing")}
-                {status === "completed" && "Completed!"}
+                {status === "completed" && t("progress.status.completed")}
-                {status === "failed" && "Failed"}
+                {status === "failed" && t("progress.status.failed")}
               </p>
               {showProgress && (
                 <span className="text-sm font-medium text-muted-foreground">

src/components/tools/ResultPreview.tsx

@@ -1,11 +1,20 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { useState, useCallback, useRef, useEffect } from "react";
-import { Download, Share2, File, Image as ImageIcon, Video, Music } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Download, Share2, File, Image as ImageIcon, Video, Music, Eye } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ImageCompareSlider } from "@/components/tools/ImageCompareSlider";
 import { formatFileSize } from "@/lib/utils";
+import { useSafeTranslation } from "@/lib/i18n";
 import type { ProcessedFile } from "@/types";
 
 interface ResultPreviewProps {
@@ -21,6 +30,43 @@ export function ResultPreview({
   onShare,
   className,
 }: ResultPreviewProps) {
+  const { t, plural } = useSafeTranslation();
+  const [previewFile, setPreviewFile] = useState<ProcessedFile | null>(null);
+  const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
+  const objectUrlRef = useRef<string | null>(null);
+
+  // Cleanup object URL when preview closes or component unmounts
+  useEffect(() => {
+    return () => {
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current);
+      }
+    };
+  }, []);
+
+  const handlePreview = useCallback((file: ProcessedFile) => {
+    // Create object URL for original image
+    if (objectUrlRef.current) {
+      URL.revokeObjectURL(objectUrlRef.current);
+    }
+    const url = URL.createObjectURL(file.originalFile.file);
+    objectUrlRef.current = url;
+    setOriginalImageUrl(url);
+    setPreviewFile(file);
+  }, []);
+
+  const handleClosePreview = useCallback(() => {
+    setPreviewFile(null);
+    // Small delay to allow dialog close animation before revoking
+    setTimeout(() => {
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current);
+        objectUrlRef.current = null;
+      }
+      setOriginalImageUrl(null);
+    }, 300);
+  }, []);
+
   if (results.length === 0) return null;
 
   const getFileIcon = (type: string) => {
@@ -32,110 +78,210 @@ export function ResultPreview({
 
   const getMetadataBadge = (file: ProcessedFile) => {
     const metadata = file.metadata;
-    const badges = [];
+    const badges: Array<{ label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = [];
 
     if (metadata.compressionRatio) {
       badges.push({
-        label: `Saved ${metadata.compressionRatio}%`,
+        label: t("results.saved", { ratio: metadata.compressionRatio }),
-        variant: "default" as const,
+        variant: "default",
       });
     }
 
     if (metadata.format) {
       badges.push({
         label: metadata.format.toUpperCase(),
-        variant: "secondary" as const,
+        variant: "secondary",
       });
     }
 
     return badges;
   };
 
+  const isImageFile = (file: ProcessedFile) => {
+    return file.originalFile.file.type.startsWith("image/");
+  };
+
+  // Translation texts for ImageCompareSlider
+  const previewTexts = {
+    original: t("preview.original"),
+    compressed: t("preview.compressed"),
+    dragHint: t("preview.dragHint"),
+  };
+
   return (
-    <motion.div
+    <>
-      initial={{ opacity: 0, y: 20 }}
+      <motion.div
-      animate={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, y: 20 }}
-      className={className}
+        animate={{ opacity: 1, y: 0 }}
-    >
+        className={className}
-      <div className="mb-4">
+      >
-        <h3 className="text-lg font-semibold">Processing Complete</h3>
+        <div className="mb-4">
-        <p className="text-sm text-muted-foreground">
+          <h3 className="text-lg font-semibold">{t("results.processingComplete")}</h3>
-          {results.length} file{results.length > 1 ? "s" : ""} ready for download
+          <p className="text-sm text-muted-foreground">
-        </p>
+            {t("results.filesReady", {
-      </div>
+              count: results.length,
+              file: plural("results.file", results.length),
+            })}
+          </p>
+        </div>
 
-      <div className="space-y-3">
+        <div className="space-y-3">
-        {results.map((result, index) => {
+          {results.map((result, index) => {
-          const Icon = getFileIcon(result.originalFile.file.type);
+            const Icon = getFileIcon(result.originalFile.file.type);
-          const badges = getMetadataBadge(result);
+            const badges = getMetadataBadge(result);
+            const showPreview = isImageFile(result);
 
-          return (
+            return (
-            <motion.div
+              <motion.div
-              key={result.id}
+                key={result.id}
-              initial={{ opacity: 0, x: -20 }}
+                initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
+                animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: index * 0.1 }}
+                transition={{ delay: index * 0.1 }}
-            >
+              >
-              <Card>
+                <Card className="group overflow-hidden">
-                <CardContent className="flex items-center gap-4 p-4">
+                  <CardContent className="flex items-center gap-4 p-4">
-                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                    {/* Thumbnail preview for images */}
-                    <Icon className="h-6 w-6 text-primary" />
+                    {showPreview && (
-                  </div>
+                      <button
+                        onClick={() => handlePreview(result)}
+                        className="relative shrink-0 h-12 w-12 rounded-lg overflow-hidden bg-muted/50 hover:ring-2 hover:ring-primary/50 transition-all cursor-zoom-in"
+                      >
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          src={result.processedUrl}
+                          alt={result.originalFile.name}
+                          className="w-full h-full object-cover"
+                        />
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
+                          <Eye className="h-5 w-5 text-white" />
+                        </div>
+                      </button>
+                    )}
 
-                  <div className="min-w-0 flex-1">
+                    {!showPreview && (
-                    <p className="truncate text-sm font-medium">
+                      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                      {result.originalFile.name}
+                        <Icon className="h-6 w-6 text-primary" />
-                    </p>
-                    <div className="mt-1 flex items-center gap-2">
-                      <span className="text-xs text-muted-foreground">
-                        {formatFileSize(result.originalFile.size)}
-                      </span>
-                      {result.metadata.resolution && (
-                        <>
-                          <span className="text-xs text-muted-foreground">•</span>
-                          <span className="text-xs text-muted-foreground">
-                            {result.metadata.resolution}
-                          </span>
-                        </>
-                      )}
-                    </div>
-                    {badges.length > 0 && (
-                      <div className="mt-2 flex gap-2">
-                        {badges.map((badge, idx) => (
-                          <Badge key={idx} variant={badge.variant} className="text-xs">
-                            {badge.label}
-                          </Badge>
-                        ))}
                       </div>
                     )}
-                  </div>
 
-                  <div className="flex gap-2">
+                    <div className="min-w-0 flex-1">
-                    <Button
+                      <p className="truncate text-sm font-medium">
-                      variant="outline"
+                        {result.originalFile.name}
-                      size="icon"
+                      </p>
-                      onClick={() => onDownload(result.id)}
+                      <div className="mt-1 flex items-center gap-2">
-                      title="Download"
+                        {result.metadata.originalSize && result.metadata.compressedSize ? (
-                    >
+                          <>
-                      <Download className="h-4 w-4" />
+                            <span className="text-xs text-muted-foreground line-through">
-                    </Button>
+                              {formatFileSize(result.metadata.originalSize)}
-                    {onShare && (
+                            </span>
+                            <span className="text-xs text-muted-foreground">→</span>
+                            <span className="text-xs text-foreground font-medium">
+                              {formatFileSize(result.metadata.compressedSize)}
+                            </span>
+                          </>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">
+                            {formatFileSize(result.originalFile.size)}
+                          </span>
+                        )}
+                        {result.metadata.resolution && (
+                          <>
+                            <span className="text-xs text-muted-foreground">•</span>
+                            <span className="text-xs text-muted-foreground">
+                              {result.metadata.resolution}
+                            </span>
+                          </>
+                        )}
+                        {result.metadata.quality && (
+                          <>
+                            <span className="text-xs text-muted-foreground">•</span>
+                            <span className="text-xs text-muted-foreground">
+                              Q: {result.metadata.quality}%
+                            </span>
+                          </>
+                        )}
+                      </div>
+                      {badges.length > 0 && (
+                        <div className="mt-2 flex gap-2">
+                          {badges.map((badge, idx) => (
+                            <Badge key={idx} variant={badge.variant} className="text-xs">
+                              {badge.label}
+                            </Badge>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex gap-2">
+                      {showPreview && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handlePreview(result)}
+                          title={t("preview.title")}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity"
+                        >
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                      )}
                       <Button
                         variant="outline"
                         size="icon"
-                        onClick={() => onShare(result.id)}
+                        onClick={() => onDownload(result.id)}
-                        title="Share"
+                        title={t("common.download")}
                       >
-                        <Share2 className="h-4 w-4" />
+                        <Download className="h-4 w-4" />
                       </Button>
-                    )}
+                      {onShare && (
-                  </div>
+                        <Button
-                </CardContent>
+                          variant="outline"
-              </Card>
+                          size="icon"
-            </motion.div>
+                          onClick={() => onShare(result.id)}
-          );
+                          title={t("common.share")}
-        })}
+                        >
-      </div>
+                          <Share2 className="h-4 w-4" />
-    </motion.div>
+                        </Button>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </div>
+      </motion.div>
+
+      {/* Preview Dialog */}
+      <AnimatePresence>
+        {previewFile && originalImageUrl && (
+          <Dialog open={!!previewFile} onOpenChange={handleClosePreview}>
+            <DialogContent className="p-0 gap-0 max-w-5xl w-[95vw] bg-background/95 backdrop-blur-xl border-border/40">
+              <DialogHeader className="p-4 pb-0">
+                <DialogTitle className="text-base">{t("preview.title")}</DialogTitle>
+              </DialogHeader>
+              <div className="p-4 pt-2">
+                <ImageCompareSlider
+                  originalSrc={originalImageUrl}
+                  compressedSrc={previewFile.processedUrl}
+                  originalSize={previewFile.metadata.originalSize}
+                  compressedSize={previewFile.metadata.compressedSize}
+                  texts={previewTexts}
+                />
+              </div>
+              <div className="p-4 pt-0 flex items-center justify-between text-xs text-muted-foreground">
+                <span>
+                  {t("preview.filename")}: {previewFile.originalFile.name}
+                </span>
+                <span>
+                  {previewFile.metadata.compressionRatio && (
+                    <>{t("results.saved", { ratio: previewFile.metadata.compressionRatio })}</>
+                  )}
+                </span>
+              </div>
+            </DialogContent>
+          </Dialog>
+        )}
+      </AnimatePresence>
+    </>
   );
 }

src/components/tools/atlas/AnimationPreviewDialog.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import { useRef, useEffect, useState, useCallback } from "react";
+import { 
+  Play, 
+  Pause, 
+  SkipBack, 
+  SkipForward,
+  Repeat,
+  Film
+} from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { useAtlasStore } from "@/store/atlasStore";
+import { useSafeTranslation } from "@/lib/i18n";
+
+/**
+ * Draw checkerboard pattern for transparency
+ */
+function drawCheckerboard(ctx: CanvasRenderingContext2D, width: number, height: number) {
+  const tileSize = 8;
+  const lightColor = "#2a2a2e";
+  const darkColor = "#1e1e22";
+
+  for (let y = 0; y < height; y += tileSize) {
+    for (let x = 0; x < width; x += tileSize) {
+      const isLight = ((x / tileSize) + (y / tileSize)) % 2 === 0;
+      ctx.fillStyle = isLight ? lightColor : darkColor;
+      ctx.fillRect(x, y, tileSize, tileSize);
+    }
+  }
+}
+
+export function AnimationPreviewDialog() {
+  const { t } = useSafeTranslation();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number | null>(null);
+  const lastFrameTimeRef = useRef<number>(0);
+
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [currentFrame, setCurrentFrame] = useState(0);
+  const [loop, setLoop] = useState(true);
+
+  const {
+    sprites,
+    isAnimationDialogOpen,
+    closeAnimationDialog,
+    animationFps,
+    setAnimationFps,
+  } = useAtlasStore();
+
+  const frameCount = sprites.length;
+  const frameInterval = 1000 / animationFps;
+
+  // Get max sprite dimensions for canvas sizing
+  const maxWidth = sprites.length > 0 ? Math.max(...sprites.map((s) => s.width)) : 200;
+  const maxHeight = sprites.length > 0 ? Math.max(...sprites.map((s) => s.height)) : 200;
+
+  // Canvas size (with some padding)
+  const canvasWidth = Math.min(maxWidth + 40, 600);
+  const canvasHeight = Math.min(maxHeight + 40, 400);
+
+  // Draw current frame
+  const drawFrame = useCallback((frameIndex: number) => {
+    const canvas = canvasRef.current;
+    if (!canvas || sprites.length === 0) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const sprite = sprites[frameIndex];
+    if (!sprite) return;
+
+    // Clear and draw background
+    ctx.fillStyle = "#0f0f11";
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+    // Calculate centered position
+    const scale = Math.min(
+      (canvasWidth - 40) / sprite.width,
+      (canvasHeight - 40) / sprite.height,
+      2 // Max 2x scale
+    );
+    
+    const scaledWidth = sprite.width * scale;
+    const scaledHeight = sprite.height * scale;
+    const x = (canvasWidth - scaledWidth) / 2;
+    const y = (canvasHeight - scaledHeight) / 2;
+
+    // Draw checkerboard behind sprite
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, y, scaledWidth, scaledHeight);
+    ctx.clip();
+    ctx.translate(x, y);
+    ctx.scale(scale, scale);
+    drawCheckerboard(ctx, sprite.width, sprite.height);
+    ctx.restore();
+
+    // Draw sprite
+    ctx.drawImage(sprite.image, x, y, scaledWidth, scaledHeight);
+
+    // Draw border
+    ctx.strokeStyle = "rgba(59, 130, 246, 0.3)";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, scaledWidth, scaledHeight);
+  }, [sprites, canvasWidth, canvasHeight]);
+
+  // Animation loop
+  useEffect(() => {
+    if (!isAnimationDialogOpen || !isPlaying || frameCount < 2) {
+      return;
+    }
+
+    const animate = (timestamp: number) => {
+      if (timestamp - lastFrameTimeRef.current >= frameInterval) {
+        lastFrameTimeRef.current = timestamp;
+        
+        setCurrentFrame((prev) => {
+          const next = prev + 1;
+          if (next >= frameCount) {
+            if (loop) {
+              return 0;
+            } else {
+              setIsPlaying(false);
+              return prev;
+            }
+          }
+          return next;
+        });
+      }
+      
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animationRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [isAnimationDialogOpen, isPlaying, frameCount, frameInterval, loop]);
+
+  // Draw frame when currentFrame changes
+  useEffect(() => {
+    drawFrame(currentFrame);
+  }, [currentFrame, drawFrame]);
+
+  // Reset when dialog opens
+  useEffect(() => {
+    if (isAnimationDialogOpen) {
+      setCurrentFrame(0);
+      setIsPlaying(true);
+      lastFrameTimeRef.current = 0;
+    }
+  }, [isAnimationDialogOpen]);
+
+  // Control handlers
+  const togglePlay = useCallback(() => {
+    setIsPlaying((prev) => !prev);
+  }, []);
+
+  const goToStart = useCallback(() => {
+    setCurrentFrame(0);
+  }, []);
+
+  const goToEnd = useCallback(() => {
+    setCurrentFrame(frameCount - 1);
+  }, [frameCount]);
+
+  const nextFrame = useCallback(() => {
+    setCurrentFrame((prev) => Math.min(prev + 1, frameCount - 1));
+    setIsPlaying(false);
+  }, [frameCount]);
+
+  const prevFrame = useCallback(() => {
+    setCurrentFrame((prev) => Math.max(prev - 1, 0));
+    setIsPlaying(false);
+  }, []);
+
+  const handleFrameSliderChange = useCallback((values: number[]) => {
+    setCurrentFrame(values[0]);
+    setIsPlaying(false);
+  }, []);
+
+  const handleFpsChange = useCallback((values: number[]) => {
+    setAnimationFps(values[0]);
+  }, [setAnimationFps]);
+
+  const toggleLoop = useCallback(() => {
+    setLoop((prev) => !prev);
+  }, []);
+
+  return (
+    <Dialog open={isAnimationDialogOpen} onOpenChange={(open) => !open && closeAnimationDialog()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Film className="h-5 w-5 text-primary" />
+            {t("atlas.animationPreview") || "动画预览"}
+          </DialogTitle>
+          <DialogDescription>
+            {t("atlas.animationDescription") || "预览精灵序列帧动画效果"}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Canvas */}
+        <div className="relative mx-auto overflow-hidden rounded-lg bg-[#0f0f11]">
+          <canvas
+            ref={canvasRef}
+            width={canvasWidth}
+            height={canvasHeight}
+            className="block"
+          />
+
+          {/* Frame counter overlay */}
+          <div className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-1 text-xs text-white">
+            {currentFrame + 1} / {frameCount}
+          </div>
+
+          {/* Sprite name overlay */}
+          {sprites[currentFrame] && (
+            <div className="absolute top-2 left-2 rounded bg-black/60 px-2 py-1 text-xs text-white truncate max-w-[200px]">
+              {sprites[currentFrame].name}
+            </div>
+          )}
+        </div>
+
+        {/* Frame timeline */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs text-muted-foreground">
+              {t("atlas.frame") || "帧"}
+            </Label>
+            <Badge variant="secondary" className="text-xs">
+              {currentFrame + 1} / {frameCount}
+            </Badge>
+          </div>
+          <Slider
+            min={0}
+            max={Math.max(0, frameCount - 1)}
+            step={1}
+            value={[currentFrame]}
+            onValueChange={handleFrameSliderChange}
+          />
+        </div>
+
+        {/* Controls */}
+        <div className="flex items-center justify-between">
+          {/* Playback controls */}
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={goToStart}
+            >
+              <SkipBack className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={prevFrame}
+            >
+              <SkipBack className="h-3 w-3" />
+            </Button>
+            <Button
+              variant="default"
+              size="icon"
+              className="h-10 w-10"
+              onClick={togglePlay}
+            >
+              {isPlaying ? (
+                <Pause className="h-5 w-5" />
+              ) : (
+                <Play className="h-5 w-5 ml-0.5" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={nextFrame}
+            >
+              <SkipForward className="h-3 w-3" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={goToEnd}
+            >
+              <SkipForward className="h-4 w-4" />
+            </Button>
+            <Button
+              variant={loop ? "secondary" : "ghost"}
+              size="icon"
+              className="h-8 w-8"
+              onClick={toggleLoop}
+            >
+              <Repeat className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* FPS control */}
+          <div className="flex items-center gap-3">
+            <Label className="text-xs text-muted-foreground whitespace-nowrap">
+              {t("atlas.fps") || "帧率"}
+            </Label>
+            <div className="w-24">
+              <Slider
+                min={1}
+                max={60}
+                step={1}
+                value={[animationFps]}
+                onValueChange={handleFpsChange}
+              />
+            </div>
+            <Badge variant="outline" className="text-xs min-w-[52px] justify-center">
+              {animationFps} FPS
+            </Badge>
+          </div>
+        </div>
+
+        {/* Sprite info */}
+        {sprites[currentFrame] && (
+          <div className="flex items-center justify-center gap-4 text-xs text-muted-foreground">
+            <span>
+              {t("atlas.spriteSize") || "精灵尺寸"}: {sprites[currentFrame].width} × {sprites[currentFrame].height}
+            </span>
+            <span>
+              {t("atlas.totalFrames") || "总帧数"}: {frameCount}
+            </span>
+            <span>
+              {t("atlas.duration") || "时长"}: {((frameCount / animationFps) * 1000).toFixed(0)}ms
+            </span>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/tools/atlas/AtlasConfigPanel.tsx

@@ -0,0 +1,649 @@
+"use client";
+
+import { useCallback } from "react";
+import JSZip from "jszip";
+import UPNG from "upng-js";
+import { 
+  Settings2, 
+  Box, 
+  LayoutGrid, 
+  FileOutput,
+  Download,
+  Archive,
+  Play,
+  RefreshCw,
+  Layers,
+  Copy,
+  AlertTriangle,
+  Zap
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAtlasStore, type SingleAtlasResult } from "@/store/atlasStore";
+import { useAtlasWorker } from "@/hooks/useAtlasWorker";
+import { 
+  exportToCocos2dPlist, 
+  exportToCocosCreatorJson, 
+  exportToGenericJson 
+} from "@/lib/atlas-packer";
+import { useSafeTranslation } from "@/lib/i18n";
+import type { TextureAtlasConfig } from "@/types";
+
+/**
+ * Config section component
+ */
+function ConfigSection({ 
+  icon: Icon, 
+  title, 
+  children 
+}: { 
+  icon: React.ElementType; 
+  title: string; 
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+        <Icon className="h-4 w-4" />
+        {title}
+      </div>
+      <div className="space-y-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Slider option component
+ */
+function SliderOption({
+  id,
+  label,
+  value,
+  min,
+  max,
+  step,
+  suffix,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  suffix?: string;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <Label htmlFor={id} className="text-xs">
+          {label}
+        </Label>
+        <Badge variant="secondary" className="text-xs">
+          {value}{suffix}
+        </Badge>
+      </div>
+      <Slider
+        id={id}
+        min={min}
+        max={max}
+        step={step}
+        value={[value]}
+        onValueChange={(values) => onChange(values[0])}
+      />
+    </div>
+  );
+}
+
+/**
+ * Select option component
+ */
+function SelectOption<T extends string | number | boolean>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: T;
+  options: { label: string; value: T }[];
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      <Label className="text-xs">{label}</Label>
+      <div className="flex flex-wrap gap-1.5">
+        {options.map((opt) => (
+          <Button
+            key={String(opt.value)}
+            variant={value === opt.value ? "default" : "outline"}
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => onChange(opt.value)}
+          >
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Get metadata content and filename for an atlas
+ */
+function getMetadataForAtlas(
+  atlas: SingleAtlasResult,
+  config: TextureAtlasConfig,
+  atlasIndex: number,
+  totalAtlases: number
+): { content: string; filename: string; mimeType: string } {
+  const suffix = totalAtlases > 1 ? `_${atlasIndex}` : "";
+  const imageFilename = `atlas${suffix}.${config.format}`;
+
+  let content: string;
+  let filename: string;
+  let mimeType: string;
+
+  if (config.outputFormat === "cocos2d") {
+    content = exportToCocos2dPlist(atlas.placements, atlas.width, atlas.height, imageFilename);
+    filename = `atlas${suffix}.plist`;
+    mimeType = "application/xml";
+  } else if (config.outputFormat === "cocos-creator") {
+    content = exportToCocosCreatorJson(atlas.placements, atlas.width, atlas.height, imageFilename, config.format);
+    filename = `atlas${suffix}.json`;
+    mimeType = "application/json";
+  } else {
+    content = exportToGenericJson(atlas.placements, atlas.width, atlas.height, imageFilename, config.format);
+    filename = `atlas${suffix}.json`;
+    mimeType = "application/json";
+  }
+
+  return { content, filename, mimeType };
+}
+
+/**
+ * Compress PNG data using UPNG quantization (similar to TinyPNG)
+ * @param dataUrl Original PNG data URL
+ * @param width Image width
+ * @param height Image height
+ * @returns Compressed PNG as Blob
+ */
+async function compressPng(dataUrl: string, width: number, height: number): Promise<Blob> {
+  // Create image from data URL
+  const img = new Image();
+  await new Promise<void>((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = reject;
+    img.src = dataUrl;
+  });
+
+  // Draw to canvas to get ImageData
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas context");
+  
+  ctx.drawImage(img, 0, 0);
+  const imageData = ctx.getImageData(0, 0, width, height);
+  
+  // Compress using UPNG (256 colors = 8-bit PNG)
+  const compressed = UPNG.encode(
+    [imageData.data.buffer],
+    width,
+    height,
+    256 // 256 colors for best quality quantization
+  );
+  
+  return new Blob([compressed], { type: "image/png" });
+}
+
+export function AtlasConfigPanel() {
+  const { t } = useSafeTranslation();
+  const { pack } = useAtlasWorker();
+
+  const {
+    sprites,
+    config,
+    result,
+    status,
+    currentAtlasIndex,
+    enableMultiAtlas,
+    enableCompression,
+    updateConfig,
+    resetConfig,
+    setEnableMultiAtlas,
+    setEnableCompression,
+    openAnimationDialog,
+  } = useAtlasStore();
+
+  // Get current atlas
+  const currentAtlas = result?.atlases[currentAtlasIndex] || null;
+  const atlasCount = result?.atlases.length || 0;
+
+  // Config handlers
+  const handleConfigChange = useCallback(
+    <K extends keyof TextureAtlasConfig>(key: K, value: TextureAtlasConfig[K]) => {
+      updateConfig({ [key]: value });
+    },
+    [updateConfig]
+  );
+
+  // Generate atlas
+  const handleGenerate = useCallback(() => {
+    if (sprites.length > 0) {
+      pack();
+    }
+  }, [sprites.length, pack]);
+
+  // Download current atlas image
+  const downloadImage = useCallback(async () => {
+    if (!currentAtlas?.imageDataUrl) return;
+    
+    const suffix = atlasCount > 1 ? `_${currentAtlasIndex}` : "";
+    const filename = `atlas${suffix}.${config.format}`;
+    
+    let url: string;
+    let needRevoke = false;
+    
+    // Apply compression if enabled and format is PNG
+    if (enableCompression && config.format === "png") {
+      const compressedBlob = await compressPng(
+        currentAtlas.imageDataUrl,
+        currentAtlas.width,
+        currentAtlas.height
+      );
+      url = URL.createObjectURL(compressedBlob);
+      needRevoke = true;
+    } else {
+      url = currentAtlas.imageDataUrl;
+    }
+    
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    if (needRevoke) {
+      URL.revokeObjectURL(url);
+    }
+  }, [currentAtlas, currentAtlasIndex, atlasCount, config.format, enableCompression]);
+
+  // Download current atlas metadata
+  const downloadMetadata = useCallback(() => {
+    if (!currentAtlas) return;
+
+    const info = getMetadataForAtlas(currentAtlas, config, currentAtlasIndex, atlasCount);
+    const blob = new Blob([info.content], { type: info.mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = info.filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [currentAtlas, config, currentAtlasIndex, atlasCount]);
+
+  // Download all atlases as zip
+  const downloadAll = useCallback(async () => {
+    if (!result || result.atlases.length === 0) return;
+
+    try {
+      const zip = new JSZip();
+      const totalAtlases = result.atlases.length;
+      const shouldCompress = enableCompression && config.format === "png";
+      
+      for (let i = 0; i < totalAtlases; i++) {
+        const atlas = result.atlases[i];
+        if (!atlas.imageDataUrl) continue;
+        
+        const suffix = totalAtlases > 1 ? `_${i}` : "";
+        const imageFilename = `atlas${suffix}.${config.format}`;
+        
+        // Add image to zip (with optional compression)
+        if (shouldCompress) {
+          const compressedBlob = await compressPng(
+            atlas.imageDataUrl,
+            atlas.width,
+            atlas.height
+          );
+          zip.file(imageFilename, compressedBlob);
+        } else {
+          const base64Data = atlas.imageDataUrl.split(",")[1];
+          zip.file(imageFilename, base64Data, { base64: true });
+        }
+        
+        // Add metadata to zip
+        const metaInfo = getMetadataForAtlas(atlas, config, i, totalAtlases);
+        zip.file(metaInfo.filename, metaInfo.content);
+      }
+      
+      // Generate and download zip
+      const blob = await zip.generateAsync({ type: "blob" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "texture-atlas.zip";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Failed to create zip:", error);
+    }
+  }, [result, config, enableCompression]);
+
+  // Check if can process
+  const canProcess = sprites.length > 0 && status !== "packing" && status !== "rendering";
+  const hasResult = !!result && result.atlases.length > 0;
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/[0.08] bg-[#1c1c1e]/80 backdrop-blur-xl shadow-xl">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-white/[0.06] px-4 py-3">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-4 w-4 text-primary" />
+          <span className="text-sm font-medium">
+            {t("config.textureAtlas.title")}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 text-xs"
+          onClick={resetConfig}
+        >
+          {t("common.reset")}
+        </Button>
+      </div>
+
+      {/* Config content */}
+      <div className="flex-1 overflow-y-auto p-3 space-y-6">
+        {/* Size settings */}
+        <ConfigSection icon={Box} title={t("atlas.sizeSettings")}>
+          <SliderOption
+            id="maxWidth"
+            label={t("config.textureAtlas.maxWidth")}
+            value={config.maxWidth}
+            min={256}
+            max={4096}
+            step={256}
+            suffix="px"
+            onChange={(v) => handleConfigChange("maxWidth", v)}
+          />
+          <SliderOption
+            id="maxHeight"
+            label={t("config.textureAtlas.maxHeight")}
+            value={config.maxHeight}
+            min={256}
+            max={4096}
+            step={256}
+            suffix="px"
+            onChange={(v) => handleConfigChange("maxHeight", v)}
+          />
+          <SliderOption
+            id="padding"
+            label={t("config.textureAtlas.padding")}
+            value={config.padding}
+            min={0}
+            max={16}
+            step={1}
+            suffix="px"
+            onChange={(v) => handleConfigChange("padding", v)}
+          />
+        </ConfigSection>
+
+        {/* Layout settings */}
+        <ConfigSection icon={LayoutGrid} title={t("atlas.layoutSettings")}>
+          <SelectOption
+            label={t("config.textureAtlas.algorithm")}
+            value={config.algorithm}
+            options={[
+              { label: "MaxRects", value: "MaxRects" as const },
+              { label: "Shelf", value: "Shelf" as const },
+            ]}
+            onChange={(v) => handleConfigChange("algorithm", v)}
+          />
+          <SelectOption
+            label={t("config.textureAtlas.allowRotation")}
+            value={config.allowRotation}
+            options={[
+              { label: t("common.no"), value: false },
+              { label: t("common.yes"), value: true },
+            ]}
+            onChange={(v) => handleConfigChange("allowRotation", v)}
+          />
+          <SelectOption
+            label={t("config.textureAtlas.pot")}
+            value={config.pot}
+            options={[
+              { label: t("common.no"), value: false },
+              { label: t("common.yes"), value: true },
+            ]}
+            onChange={(v) => handleConfigChange("pot", v)}
+          />
+        </ConfigSection>
+
+        {/* Output settings */}
+        <ConfigSection icon={FileOutput} title={t("atlas.outputSettings")}>
+          <SelectOption
+            label={t("config.textureAtlas.format")}
+            value={config.format}
+            options={[
+              { label: "PNG", value: "png" as const },
+              { label: "WebP", value: "webp" as const },
+            ]}
+            onChange={(v) => handleConfigChange("format", v)}
+          />
+          {config.format === "webp" && (
+            <SliderOption
+              id="quality"
+              label={t("config.textureAtlas.quality")}
+              value={config.quality}
+              min={1}
+              max={100}
+              step={1}
+              suffix="%"
+              onChange={(v) => handleConfigChange("quality", v)}
+            />
+          )}
+          <SelectOption
+            label={t("config.textureAtlas.outputFormat")}
+            value={config.outputFormat}
+            options={[
+              { label: "Cocos2d plist", value: "cocos2d" as const },
+              { label: "Cocos Creator", value: "cocos-creator" as const },
+              { label: "JSON", value: "generic-json" as const },
+            ]}
+            onChange={(v) => handleConfigChange("outputFormat", v)}
+          />
+        </ConfigSection>
+
+        {/* Advanced settings - Multi-atlas mode */}
+        <ConfigSection icon={Copy} title={t("atlas.advancedSettings")}>
+          <SelectOption
+            label={t("config.textureAtlas.multiAtlas")}
+            value={enableMultiAtlas}
+            options={[
+              { label: t("common.off"), value: false },
+              { label: t("common.on"), value: true },
+            ]}
+            onChange={(v) => setEnableMultiAtlas(v)}
+          />
+          <p className="text-[10px] text-muted-foreground/70 leading-relaxed">
+            {t("atlas.multiAtlasHint")}
+          </p>
+        </ConfigSection>
+
+        {/* Compression settings */}
+        <ConfigSection icon={Zap} title={t("atlas.compressionSettings")}>
+          <SelectOption
+            label={t("config.textureAtlas.compression")}
+            value={enableCompression}
+            options={[
+              { label: t("common.off"), value: false },
+              { label: t("common.on"), value: true },
+            ]}
+            onChange={(v) => setEnableCompression(v)}
+          />
+          <p className="text-[10px] text-muted-foreground/70 leading-relaxed">
+            {t("atlas.compressionHint")}
+          </p>
+        </ConfigSection>
+
+        {/* Unpacked sprites warning */}
+        {result && result.unpackedSpriteIds.length > 0 && !enableMultiAtlas && (
+          <div className="rounded-lg border border-amber-500/30 bg-amber-950/40 p-3">
+            <div className="flex items-start gap-2">
+              <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500 mt-0.5" />
+              <div className="flex-1 min-w-0">
+                <p className="text-xs font-medium text-amber-200">
+                  {t("atlas.unpackedCount", { count: result.unpackedSpriteIds.length })}
+                </p>
+                <p className="text-[10px] text-amber-200/60 mt-1 leading-relaxed">
+                  {t("atlas.unpackedSuggestion")}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Result info */}
+        {hasResult && (
+          <Card className="bg-primary/5 border-primary/20">
+            <CardHeader className="pb-2 pt-3 px-3">
+              <CardTitle className="flex items-center gap-2 text-sm">
+                <Layers className="h-4 w-4 text-primary" />
+                {t("atlas.resultInfo")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-3 pb-3">
+              <div className="grid grid-cols-2 gap-2 text-xs">
+                {atlasCount > 1 ? (
+                  <>
+                    <div>
+                      <span className="text-muted-foreground">{t("atlas.atlasCount")}:</span>
+                      <p className="font-medium">{atlasCount}</p>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">{t("tools.textureAtlas.sprites")}:</span>
+                      <p className="font-medium">{result.packedCount}</p>
+                    </div>
+                    {currentAtlas && (
+                      <>
+                        <div className="col-span-2 pt-1 border-t border-white/10">
+                          <span className="text-muted-foreground">
+                            {t("atlas.currentAtlas", { index: currentAtlasIndex + 1 })}:
+                          </span>
+                        </div>
+                        <div>
+                          <span className="text-muted-foreground">{t("tools.textureAtlas.dimensions")}:</span>
+                          <p className="font-medium">{currentAtlas.width} × {currentAtlas.height}</p>
+                        </div>
+                        <div>
+                          <span className="text-muted-foreground">{t("tools.textureAtlas.sprites")}:</span>
+                          <p className="font-medium">{currentAtlas.placements.length}</p>
+                        </div>
+                      </>
+                    )}
+                  </>
+                ) : currentAtlas && (
+                  <>
+                    <div>
+                      <span className="text-muted-foreground">{t("tools.textureAtlas.dimensions")}:</span>
+                      <p className="font-medium">{currentAtlas.width} × {currentAtlas.height}</p>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">{t("tools.textureAtlas.sprites")}:</span>
+                      <p className="font-medium">{currentAtlas.placements.length}</p>
+                    </div>
+                  </>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="border-t border-white/[0.06] p-4 space-y-2.5">
+        {/* Generate button */}
+        <Button
+          className="w-full rounded-xl"
+          size="lg"
+          onClick={handleGenerate}
+          disabled={!canProcess}
+        >
+          {status === "packing" || status === "rendering" ? (
+            <>
+              <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+              {t("common.processing")}
+            </>
+          ) : (
+            <>
+              <Layers className="mr-2 h-4 w-4" />
+              {t("tools.textureAtlas.createAtlas")}
+            </>
+          )}
+        </Button>
+
+        {/* Animation preview */}
+        <Button
+          variant="outline"
+          className="w-full rounded-xl border-white/[0.08] hover:bg-white/[0.06]"
+          onClick={openAnimationDialog}
+          disabled={sprites.length < 2}
+        >
+          <Play className="mr-2 h-4 w-4" />
+          {t("atlas.previewAnimation")}
+        </Button>
+
+        {/* Download buttons */}
+        {hasResult && (
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              className="flex-1 rounded-xl border-white/[0.08] hover:bg-white/[0.06]"
+              onClick={downloadImage}
+            >
+              <Download className="mr-2 h-4 w-4" />
+              {t("tools.textureAtlas.downloadImage")}
+            </Button>
+            <Button
+              variant="outline"
+              className="flex-1 rounded-xl border-white/[0.08] hover:bg-white/[0.06]"
+              onClick={downloadMetadata}
+            >
+              <Download className="mr-2 h-4 w-4" />
+              {t("tools.textureAtlas.downloadData")}
+            </Button>
+          </div>
+        )}
+        
+        {hasResult && (
+          <Button
+            variant="secondary"
+            className="w-full rounded-xl"
+            onClick={downloadAll}
+          >
+            <Archive className="mr-2 h-4 w-4" />
+            {atlasCount > 1 
+              ? t("atlas.downloadAllAtlases", { count: atlasCount })
+              : t("tools.textureAtlas.downloadAll")
+            }
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/tools/atlas/CanvasPreview.tsx

@@ -0,0 +1,584 @@
+"use client";
+
+import { useRef, useEffect, useCallback, useState } from "react";
+import { motion } from "framer-motion";
+import { 
+  ZoomIn, 
+  ZoomOut, 
+  Maximize2, 
+  Play,
+  Layers,
+  Move,
+  Download,
+  AlertTriangle,
+  ChevronLeft,
+  ChevronRight
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { useAtlasStore } from "@/store/atlasStore";
+import { useSafeTranslation } from "@/lib/i18n";
+
+/**
+ * Draw checkerboard pattern for transparency
+ */
+function drawCheckerboard(ctx: CanvasRenderingContext2D, width: number, height: number) {
+  const tileSize = 8;
+  const lightColor = "#2a2a2e";
+  const darkColor = "#1e1e22";
+
+  for (let y = 0; y < height; y += tileSize) {
+    for (let x = 0; x < width; x += tileSize) {
+      const isLight = ((x / tileSize) + (y / tileSize)) % 2 === 0;
+      ctx.fillStyle = isLight ? lightColor : darkColor;
+      ctx.fillRect(x, y, tileSize, tileSize);
+    }
+  }
+}
+
+export function CanvasPreview() {
+  const { t } = useSafeTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imageCacheRef = useRef<Map<number, { url: string; image: HTMLImageElement }>>(new Map());
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [hasMoved, setHasMoved] = useState(false);
+  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
+  
+  const {
+    sprites,
+    result,
+    status,
+    progress,
+    currentAtlasIndex,
+    previewScale,
+    previewOffset,
+    selectedSpriteIds,
+    setPreviewScale,
+    setPreviewOffset,
+    setCurrentAtlasIndex,
+    selectSprite,
+    openAnimationDialog,
+  } = useAtlasStore();
+
+  // Get current atlas
+  const currentAtlas = result?.atlases[currentAtlasIndex] || null;
+  const atlasCount = result?.atlases.length || 0;
+  
+  // Calculate dimensions
+  const atlasWidth = currentAtlas?.width || 0;
+  const atlasHeight = currentAtlas?.height || 0;
+
+  // Update container size on resize
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setContainerSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    });
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  // Render canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const { width: cw, height: ch } = containerSize;
+    if (cw === 0 || ch === 0) return;
+
+    // Set canvas size
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = cw * dpr;
+    canvas.height = ch * dpr;
+    canvas.style.width = `${cw}px`;
+    canvas.style.height = `${ch}px`;
+    ctx.scale(dpr, dpr);
+
+    // Clear and draw background
+    ctx.fillStyle = "#0f0f11";
+    ctx.fillRect(0, 0, cw, ch);
+
+    if (currentAtlas && currentAtlas.imageDataUrl) {
+      const drawImage = (img: HTMLImageElement) => {
+        ctx.clearRect(0, 0, cw, ch);
+        ctx.fillStyle = "#0f0f11";
+        ctx.fillRect(0, 0, cw, ch);
+
+        // Calculate centered position
+        const scaledWidth = atlasWidth * previewScale;
+        const scaledHeight = atlasHeight * previewScale;
+        const centerX = (cw - scaledWidth) / 2 + previewOffset.x;
+        const centerY = (ch - scaledHeight) / 2 + previewOffset.y;
+
+        // Draw checkerboard background for atlas area
+        ctx.save();
+        ctx.translate(centerX, centerY);
+        ctx.beginPath();
+        ctx.rect(0, 0, scaledWidth, scaledHeight);
+        ctx.clip();
+        
+        // Scale checkerboard
+        ctx.scale(previewScale, previewScale);
+        drawCheckerboard(ctx, atlasWidth, atlasHeight);
+        ctx.restore();
+
+        // Draw atlas image
+        ctx.drawImage(img, centerX, centerY, scaledWidth, scaledHeight);
+
+        // Draw selection highlight for all selected sprites
+        if (selectedSpriteIds.length > 0) {
+          currentAtlas.placements.forEach(p => {
+            if (selectedSpriteIds.includes(p.id)) {
+              const pw = (p.rotated ? p.height : p.width) * previewScale;
+              const ph = (p.rotated ? p.width : p.height) * previewScale;
+              const px = centerX + p.x * previewScale;
+              const py = centerY + p.y * previewScale;
+
+              // Apple style highlight: outer glow and soft border
+              ctx.save();
+              
+              // Shadow/Glow
+              ctx.shadowBlur = 15;
+              ctx.shadowColor = "rgba(59, 130, 246, 0.6)";
+              
+              // Animated outer border
+              const time = Date.now() / 1000;
+              const pulse = Math.sin(time * 3) * 0.2 + 0.8;
+              
+              ctx.strokeStyle = `rgba(59, 130, 246, ${pulse})`;
+              ctx.lineWidth = 2;
+              
+              // Rounded rect path
+              const radius = 4;
+              ctx.beginPath();
+              ctx.moveTo(px + radius, py);
+              ctx.lineTo(px + pw - radius, py);
+              ctx.quadraticCurveTo(px + pw, py, px + pw, py + radius);
+              ctx.lineTo(px + pw, py + ph - radius);
+              ctx.quadraticCurveTo(px + pw, py + ph, px + pw - radius, py + ph);
+              ctx.lineTo(px + radius, py + ph);
+              ctx.quadraticCurveTo(px, py + ph, px, py + ph - radius);
+              ctx.lineTo(px, py + radius);
+              ctx.quadraticCurveTo(px, py, px + radius, py);
+              ctx.closePath();
+              ctx.stroke();
+
+              // Inner fill with very low opacity
+              ctx.fillStyle = "rgba(59, 130, 246, 0.1)";
+              ctx.fill();
+              
+              ctx.restore();
+            }
+          });
+        }
+
+        // Draw border
+        ctx.strokeStyle = "rgba(255, 255, 255, 0.1)";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(centerX, centerY, scaledWidth, scaledHeight);
+
+        // Draw dimensions label
+        ctx.fillStyle = "rgba(59, 130, 246, 0.8)";
+        ctx.font = "11px system-ui, sans-serif";
+        ctx.textAlign = "center";
+        ctx.fillText(
+          `${atlasWidth} × ${atlasHeight}`,
+          centerX + scaledWidth / 2,
+          centerY - 8
+        );
+      };
+
+      // Use cached image if URL matches
+      const cached = imageCacheRef.current.get(currentAtlasIndex);
+      if (cached && cached.url === currentAtlas.imageDataUrl) {
+        drawImage(cached.image);
+      } else {
+        // Load and draw the atlas image
+        const img = new Image();
+        img.src = currentAtlas.imageDataUrl;
+        
+        img.onload = () => {
+          imageCacheRef.current.set(currentAtlasIndex, { url: currentAtlas.imageDataUrl!, image: img });
+          drawImage(img);
+        };
+      }
+    } else if (sprites.length === 0) {
+      // Empty state
+      ctx.fillStyle = "#71717a";
+      ctx.font = "14px system-ui, sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(
+        t("atlas.emptyPreview"),
+        cw / 2,
+        ch / 2
+      );
+    }
+  }, [containerSize, currentAtlas, currentAtlasIndex, sprites.length, previewScale, previewOffset, atlasWidth, atlasHeight, selectedSpriteIds, t]);
+
+  // Render loop for animation (selection highlight pulsing)
+  useEffect(() => {
+    if (selectedSpriteIds.length === 0) return;
+    
+    let animationFrame: number;
+    let mounted = true;
+    
+    const render = () => {
+      if (!mounted) return;
+      
+      // Force re-render by updating containerSize (triggers canvas redraw)
+      setContainerSize(s => ({ ...s }));
+      animationFrame = requestAnimationFrame(render);
+    };
+    
+    animationFrame = requestAnimationFrame(render);
+    return () => {
+      mounted = false;
+      cancelAnimationFrame(animationFrame);
+    };
+  }, [selectedSpriteIds.length > 0]); // Only care about whether there are selections
+
+  // Handle wheel zoom - use native event listener with passive: false
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      setPreviewScale(previewScale + delta);
+    };
+
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => container.removeEventListener("wheel", handleWheel);
+  }, [previewScale, setPreviewScale]);
+
+  // Handle mouse down for panning and picking
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button === 0) {
+      setIsPanning(true);
+      setHasMoved(false);
+      setPanStart({ x: e.clientX - previewOffset.x, y: e.clientY - previewOffset.y });
+    }
+  }, [previewOffset]);
+
+  // Handle mouse move for panning
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (isPanning) {
+      const dx = Math.abs(e.clientX - (panStart.x + previewOffset.x));
+      const dy = Math.abs(e.clientY - (panStart.y + previewOffset.y));
+      if (dx > 2 || dy > 2) {
+        setHasMoved(true);
+      }
+      
+      setPreviewOffset({
+        x: e.clientX - panStart.x,
+        y: e.clientY - panStart.y,
+      });
+    }
+  }, [isPanning, panStart, previewOffset, setPreviewOffset]);
+
+  // Handle mouse up (Picking logic)
+  const handleMouseUp = useCallback((e: React.MouseEvent) => {
+    if (isPanning && !hasMoved && currentAtlas && containerRef.current) {
+      // Pick sprite
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+
+      const { width: cw, height: ch } = containerSize;
+      const scaledWidth = atlasWidth * previewScale;
+      const scaledHeight = atlasHeight * previewScale;
+      const centerX = (cw - scaledWidth) / 2 + previewOffset.x;
+      const centerY = (ch - scaledHeight) / 2 + previewOffset.y;
+
+      // Transform mouse to atlas space
+      const atlasX = (mouseX - centerX) / previewScale;
+      const atlasY = (mouseY - centerY) / previewScale;
+
+      // Find sprite under cursor
+      const clickedSprite = currentAtlas.placements.find(p => {
+        const pw = p.rotated ? p.height : p.width;
+        const ph = p.rotated ? p.width : p.height;
+        return atlasX >= p.x && atlasX <= p.x + pw &&
+               atlasY >= p.y && atlasY <= p.y + ph;
+      });
+
+      if (clickedSprite) {
+        selectSprite(clickedSprite.id, e.ctrlKey || e.metaKey);
+      } else {
+        selectSprite("", false); // Deselect if clicked empty area
+      }
+    }
+    setIsPanning(false);
+  }, [isPanning, hasMoved, currentAtlas, containerSize, atlasWidth, atlasHeight, previewScale, previewOffset, selectSprite]);
+
+  // Fit to view
+  const fitToView = useCallback(() => {
+    if (!currentAtlas || containerSize.width === 0) return;
+
+    const padding = 40;
+    const availableWidth = containerSize.width - padding * 2;
+    const availableHeight = containerSize.height - padding * 2;
+
+    const scaleX = availableWidth / atlasWidth;
+    const scaleY = availableHeight / atlasHeight;
+    const newScale = Math.min(scaleX, scaleY, 1);
+
+    setPreviewScale(newScale);
+    setPreviewOffset({ x: 0, y: 0 });
+  }, [currentAtlas, containerSize, atlasWidth, atlasHeight, setPreviewScale, setPreviewOffset]);
+
+  // Zoom controls
+  const zoomIn = useCallback(() => setPreviewScale(previewScale + 0.1), [previewScale, setPreviewScale]);
+  const zoomOut = useCallback(() => setPreviewScale(previewScale - 0.1), [previewScale, setPreviewScale]);
+
+  // Download image
+  const downloadImage = useCallback(() => {
+    if (!currentAtlas?.imageDataUrl) return;
+    
+    const link = document.createElement("a");
+    link.href = currentAtlas.imageDataUrl;
+    const suffix = atlasCount > 1 ? `_${currentAtlasIndex}` : "";
+    link.download = `atlas${suffix}_${atlasWidth}x${atlasHeight}.png`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [currentAtlas, currentAtlasIndex, atlasCount, atlasWidth, atlasHeight]);
+
+  // Navigate atlases
+  const goToPrevAtlas = useCallback(() => {
+    if (currentAtlasIndex > 0) {
+      setCurrentAtlasIndex(currentAtlasIndex - 1);
+    }
+  }, [currentAtlasIndex, setCurrentAtlasIndex]);
+
+  const goToNextAtlas = useCallback(() => {
+    if (currentAtlasIndex < atlasCount - 1) {
+      setCurrentAtlasIndex(currentAtlasIndex + 1);
+    }
+  }, [currentAtlasIndex, atlasCount, setCurrentAtlasIndex]);
+
+  // Scale percentage
+  const scalePercent = Math.round(previewScale * 100);
+
+  return (
+    <div className="relative flex h-full flex-col overflow-hidden rounded-2xl border border-white/[0.08] bg-[#1c1c1e]/80 backdrop-blur-xl shadow-xl">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between border-b border-white/[0.06] bg-black/20 px-4 py-2.5">
+        <div className="flex items-center gap-2">
+          <Layers className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">
+            {t("atlas.preview")}
+          </span>
+          {currentAtlas && (
+            <Badge variant="secondary" className="text-xs">
+              {atlasWidth} × {atlasHeight}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* Atlas navigation (only show when multiple atlases) */}
+          {atlasCount > 1 && (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={goToPrevAtlas}
+                disabled={currentAtlasIndex === 0}
+              >
+                <ChevronLeft className="h-3.5 w-3.5" />
+              </Button>
+              
+              <div className="px-2 text-xs text-muted-foreground min-w-[60px] text-center">
+                {currentAtlasIndex + 1} / {atlasCount}
+              </div>
+              
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={goToNextAtlas}
+                disabled={currentAtlasIndex === atlasCount - 1}
+              >
+                <ChevronRight className="h-3.5 w-3.5" />
+              </Button>
+
+              <div className="mx-1 h-4 w-px bg-border/40" />
+            </>
+          )}
+          
+          {/* Zoom controls */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={zoomOut}
+            disabled={previewScale <= 0.1}
+          >
+            <ZoomOut className="h-3.5 w-3.5" />
+          </Button>
+          
+          <div className="w-12 text-center text-xs text-muted-foreground">
+            {scalePercent}%
+          </div>
+          
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={zoomIn}
+            disabled={previewScale >= 4}
+          >
+            <ZoomIn className="h-3.5 w-3.5" />
+          </Button>
+
+          <div className="mx-1 h-4 w-px bg-border/40" />
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={fitToView}
+            disabled={!currentAtlas}
+          >
+            <Maximize2 className="h-3.5 w-3.5" />
+          </Button>
+
+          <div className="mx-1 h-4 w-px bg-border/40" />
+
+          {/* Animation preview */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={openAnimationDialog}
+            disabled={sprites.length < 2}
+            title={t("atlas.previewAnimation")}
+          >
+            <Play className="h-3.5 w-3.5" />
+          </Button>
+
+          {/* Download */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={downloadImage}
+            disabled={!currentAtlas?.imageDataUrl}
+            title={t("common.download")}
+          >
+            <Download className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Canvas container */}
+      <div
+        ref={containerRef}
+        className="relative flex-1 cursor-grab overflow-hidden bg-[#0a0a0b] active:cursor-grabbing"
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0"
+        />
+
+        {/* Loading overlay */}
+        {(status === "packing" || status === "rendering" || status === "loading") && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className={`absolute inset-0 flex flex-col items-center justify-center backdrop-blur-[2px] ${
+              result ? "bg-black/20" : "bg-black/60"
+            }`}
+          >
+            <div className="mb-4 h-10 w-10 animate-spin rounded-full border-3 border-primary border-t-transparent" />
+            <p className="mb-2 text-sm font-medium shadow-sm">
+              {status === "packing" && t("atlas.packing")}
+              {status === "rendering" && t("atlas.rendering")}
+              {status === "loading" && t("common.loading")}
+            </p>
+            {progress > 0 && (
+              <div className="h-1.5 w-32 overflow-hidden rounded-full bg-white/10 shadow-inner">
+                <motion.div
+                  initial={{ width: 0 }}
+                  animate={{ width: `${progress}%` }}
+                  className="h-full bg-primary"
+                />
+              </div>
+            )}
+          </motion.div>
+        )}
+
+        {/* Empty state overlay */}
+        {sprites.length === 0 && status === "idle" && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-[#0a0a0b]">
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-white/[0.04]">
+              <Layers className="h-8 w-8 text-muted-foreground/60" />
+            </div>
+            <p className="mb-1 text-sm font-medium text-muted-foreground">
+              {t("atlas.emptyPreview")}
+            </p>
+            <p className="text-xs text-muted-foreground/50">
+              {t("atlas.dragHint")}
+            </p>
+          </div>
+        )}
+
+        {/* Pan hint */}
+        {currentAtlas && !isPanning && result && result.unpackedSpriteIds.length === 0 && (
+          <div className="absolute bottom-4 left-4 flex items-center gap-1.5 rounded-lg bg-black/60 px-3 py-1.5 text-xs text-muted-foreground backdrop-blur-sm">
+            <Move className="h-3 w-3" />
+            {t("atlas.panHint")}
+          </div>
+        )}
+
+        {/* Multi-atlas indicator */}
+        {atlasCount > 1 && (
+          <div className="absolute top-4 left-4 flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-3 py-1.5 text-xs text-primary backdrop-blur-sm">
+            <Layers className="h-3 w-3" />
+            {t("atlas.atlasIndex", { current: currentAtlasIndex + 1, total: atlasCount })}
+          </div>
+        )}
+
+        {/* Unpacked sprites warning */}
+        {result && result.unpackedSpriteIds.length > 0 && (
+          <div className="absolute bottom-0 left-0 right-0 flex items-center gap-2 border-t border-amber-500/30 bg-amber-950/80 px-4 py-2.5 backdrop-blur-sm">
+            <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />
+            <div className="flex-1 min-w-0">
+              <p className="text-xs font-medium text-amber-200">
+                {t("atlas.unpackedWarning", { count: result.unpackedSpriteIds.length })}
+              </p>
+              <p className="text-[10px] text-amber-200/60 truncate">
+                {t("atlas.unpackedHint")}
+              </p>
+            </div>
+            <Badge variant="outline" className="shrink-0 border-amber-500/50 bg-amber-500/10 text-amber-300">
+              {result.unpackedSpriteIds.length} / {sprites.length}
+            </Badge>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/tools/atlas/FileListPanel.tsx

@@ -0,0 +1,534 @@
+"use client";
+
+import { useCallback, useRef, useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { 
+  Folder, 
+  FolderOpen, 
+  Image as ImageIcon, 
+  Trash2, 
+  Upload, 
+  X,
+  ChevronDown,
+  ChevronRight,
+  AlertCircle
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAtlasStore, type BrowserSprite } from "@/store/atlasStore";
+import { useSafeTranslation } from "@/lib/i18n";
+
+/**
+ * Generate unique ID
+ */
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+/**
+ * Natural sort comparator for filenames
+ */
+function naturalSort(a: string, b: string): number {
+  return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
+}
+
+/**
+ * Check if file is an image
+ */
+function isImageFile(file: File): boolean {
+  const imageTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp", "image/gif", "image/bmp"];
+  return imageTypes.includes(file.type) || /\.(png|jpe?g|webp|gif|bmp)$/i.test(file.name);
+}
+
+/**
+ * Load image file as BrowserSprite
+ */
+async function loadImageAsSprite(file: File): Promise<BrowserSprite> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    
+    reader.onload = async () => {
+      try {
+        const blob = new Blob([reader.result as ArrayBuffer], { type: file.type });
+        const imageBitmap = await createImageBitmap(blob);
+        
+        resolve({
+          id: generateId(),
+          name: file.name,
+          width: imageBitmap.width,
+          height: imageBitmap.height,
+          image: imageBitmap,
+          file,
+        });
+      } catch (error) {
+        reject(error);
+      }
+    };
+    
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+export function FileListPanel() {
+  const { t } = useSafeTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+  
+  const [isDragging, setIsDragging] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(true);
+  
+  const { 
+    sprites, 
+    folderName, 
+    result,
+    addSprites, 
+    removeSprite, 
+    clearSprites, 
+    setFolderName,
+    selectedSpriteIds,
+    selectSprite,
+    setStatus,
+  } = useAtlasStore();
+  
+  // Get unpacked sprite IDs
+  const unpackedSpriteIds = result?.unpackedSpriteIds || [];
+
+  /**
+   * Process uploaded files
+   */
+  const processFiles = useCallback(async (files: FileList | File[]) => {
+    const fileArray = Array.from(files);
+    const imageFiles = fileArray.filter(isImageFile);
+    
+    if (imageFiles.length === 0) return;
+
+    setIsLoading(true);
+    setStatus("loading");
+
+    try {
+      // Sort by filename
+      imageFiles.sort((a, b) => naturalSort(a.name, b.name));
+
+      // Extract folder name from first file's path
+      const firstFile = imageFiles[0];
+      if (firstFile.webkitRelativePath) {
+        const pathParts = firstFile.webkitRelativePath.split("/");
+        if (pathParts.length > 1) {
+          setFolderName(pathParts[0]);
+        }
+      }
+
+      // Load all images
+      const loadPromises = imageFiles.map((file) => loadImageAsSprite(file));
+      const loadedSprites = await Promise.all(loadPromises);
+      
+      addSprites(loadedSprites);
+      setStatus("idle");
+    } catch (error) {
+      console.error("Failed to load images:", error);
+      setStatus("error");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [addSprites, setFolderName, setStatus]);
+
+  /**
+   * Handle drag events
+   */
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Check if we're leaving the drop zone
+    if (dropZoneRef.current && !dropZoneRef.current.contains(e.relatedTarget as Node)) {
+      setIsDragging(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const items = e.dataTransfer.items;
+    const dataTransferFiles = e.dataTransfer.files;
+    const files: File[] = [];
+
+    // Read all entries from a directory (handles batched readEntries)
+    const readAllEntries = async (reader: FileSystemDirectoryReader): Promise<FileSystemEntry[]> => {
+      const allEntries: FileSystemEntry[] = [];
+      
+      const readBatch = (): Promise<FileSystemEntry[]> => {
+        return new Promise((resolve) => {
+          reader.readEntries((entries) => resolve(entries));
+        });
+      };
+
+      // readEntries may return results in batches, keep reading until empty
+      let batch = await readBatch();
+      while (batch.length > 0) {
+        allEntries.push(...batch);
+        batch = await readBatch();
+      }
+      
+      return allEntries;
+    };
+
+    // Handle folder drop
+    const processEntry = async (entry: FileSystemEntry): Promise<void> => {
+      if (entry.isFile) {
+        const fileEntry = entry as FileSystemFileEntry;
+        return new Promise((resolve) => {
+          fileEntry.file((file) => {
+            if (isImageFile(file)) {
+              // Add webkitRelativePath-like info
+              Object.defineProperty(file, "webkitRelativePath", {
+                value: entry.fullPath.substring(1), // Remove leading slash
+                writable: false,
+              });
+              files.push(file);
+            }
+            resolve();
+          });
+        });
+      } else if (entry.isDirectory) {
+        const dirEntry = entry as FileSystemDirectoryEntry;
+        const reader = dirEntry.createReader();
+        const entries = await readAllEntries(reader);
+        
+        for (const childEntry of entries) {
+          await processEntry(childEntry);
+        }
+      }
+    };
+
+    // Check if webkitGetAsEntry is supported
+    let hasEntrySupport = false;
+    if (items && items.length > 0 && typeof items[0].webkitGetAsEntry === "function") {
+      hasEntrySupport = true;
+    }
+
+    if (hasEntrySupport) {
+      // Process using FileSystem API (supports folders)
+      const entryPromises: Promise<void>[] = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const entry = item.webkitGetAsEntry?.();
+        
+        if (entry) {
+          entryPromises.push(processEntry(entry));
+        }
+      }
+      await Promise.all(entryPromises);
+    } else {
+      // Fallback: use dataTransfer.files directly (no folder support)
+      for (let i = 0; i < dataTransferFiles.length; i++) {
+        const file = dataTransferFiles[i];
+        if (file && isImageFile(file)) {
+          files.push(file);
+        }
+      }
+    }
+
+    if (files.length > 0) {
+      // Extract folder name from first file
+      if (files[0].webkitRelativePath) {
+        const pathParts = files[0].webkitRelativePath.split("/");
+        if (pathParts.length > 1) {
+          setFolderName(pathParts[0]);
+        }
+      }
+      
+      await processFiles(files);
+    }
+  }, [processFiles, setFolderName]);
+
+  /**
+   * Handle file input change
+   */
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      processFiles(e.target.files);
+    }
+    // Reset input
+    e.target.value = "";
+  }, [processFiles]);
+
+  /**
+   * Handle sprite click
+   */
+  const handleSpriteClick = useCallback((id: string, e: React.MouseEvent) => {
+    selectSprite(id, e.ctrlKey || e.metaKey);
+  }, [selectSprite]);
+
+  /**
+   * Handle clear all
+   */
+  const handleClear = useCallback(() => {
+    clearSprites();
+    setFolderName("");
+  }, [clearSprites, setFolderName]);
+
+  /**
+   * Scroll selected item into view
+   */
+  useEffect(() => {
+    if (selectedSpriteIds.length === 1) {
+      const selectedId = selectedSpriteIds[0];
+      const element = document.getElementById(`sprite-${selectedId}`);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    }
+  }, [selectedSpriteIds]);
+
+  return (
+    <div 
+      ref={dropZoneRef}
+      className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/[0.08] bg-[#1c1c1e]/80 backdrop-blur-xl shadow-xl"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-white/[0.06] px-4 py-3">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </button>
+          {folderName ? (
+            <FolderOpen className="h-4 w-4 text-primary" />
+          ) : (
+            <Folder className="h-4 w-4 text-muted-foreground" />
+          )}
+          <span className="text-sm font-medium truncate max-w-[120px]">
+            {folderName || t("tools.textureAtlas.sprites") || "精灵"}
+          </span>
+          {sprites.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              ({sprites.length})
+            </span>
+          )}
+        </div>
+        {sprites.length > 0 && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 hover:bg-white/[0.06]"
+            onClick={handleClear}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      {/* File list */}
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0 }}
+            animate={{ height: "auto" }}
+            exit={{ height: 0 }}
+            className="flex-1 overflow-hidden"
+          >
+            <div className="h-full overflow-y-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+              {sprites.length > 0 ? (
+                <div className="space-y-1 p-2">
+                  {sprites.map((sprite, index) => (
+                    <motion.div
+                      key={sprite.id}
+                      id={`sprite-${sprite.id}`}
+                      initial={{ opacity: 0, x: -10 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: -10 }}
+                      transition={{ delay: index * 0.02 }}
+                      onClick={(e) => handleSpriteClick(sprite.id, e)}
+                      className={`
+                        group flex items-center gap-2.5 rounded-xl px-2.5 py-2 cursor-pointer
+                        transition-all duration-150 hover:bg-white/[0.06]
+                        ${selectedSpriteIds.includes(sprite.id) ? "bg-primary/15 ring-1 ring-primary/30" : ""}
+                        ${unpackedSpriteIds.includes(sprite.id) ? "bg-amber-500/10 border border-amber-500/30" : ""}
+                      `}
+                    >
+                      {/* Thumbnail */}
+                      <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-lg border border-white/[0.08] bg-black/30">
+                        <canvas
+                          ref={(canvas) => {
+                            if (canvas && sprite.image) {
+                              const ctx = canvas.getContext("2d");
+                              if (ctx) {
+                                canvas.width = 36;
+                                canvas.height = 36;
+                                
+                                // Calculate aspect ratio fit
+                                const scale = Math.min(36 / sprite.width, 36 / sprite.height);
+                                const w = sprite.width * scale;
+                                const h = sprite.height * scale;
+                                const x = (36 - w) / 2;
+                                const y = (36 - h) / 2;
+                                
+                                ctx.clearRect(0, 0, 36, 36);
+                                ctx.drawImage(sprite.image, x, y, w, h);
+                              }
+                            }
+                          }}
+                          className="h-full w-full"
+                        />
+                        {/* Unpacked indicator */}
+                        {unpackedSpriteIds.includes(sprite.id) && (
+                          <div className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 shadow-sm">
+                            <AlertCircle className="h-3 w-3 text-amber-950" />
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Info */}
+                      <div className="min-w-0 flex-1">
+                        <p className={`truncate text-xs font-medium ${unpackedSpriteIds.includes(sprite.id) ? "text-amber-300" : ""}`}>
+                          {sprite.name}
+                        </p>
+                        <p className="text-[10px] text-muted-foreground/70">
+                          {sprite.width} × {sprite.height}
+                        </p>
+                      </div>
+
+                      {/* Remove button */}
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 opacity-0 group-hover:opacity-100 hover:bg-white/[0.08] transition-opacity"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          removeSprite(sprite.id);
+                        }}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </motion.div>
+                  ))}
+                </div>
+              ) : (
+                /* Empty state / Drop zone */
+                <div className="flex h-full min-h-[200px] flex-col items-center justify-center p-4 text-center">
+                  {isDragging ? (
+                    <motion.div
+                      initial={{ scale: 0.9, opacity: 0 }}
+                      animate={{ scale: 1, opacity: 1 }}
+                      className="flex flex-col items-center"
+                    >
+                      <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/20">
+                        <Upload className="h-7 w-7 text-primary" />
+                      </div>
+                      <p className="text-sm font-medium text-primary">
+                        {t("uploader.dropActive") || "释放文件即可上传"}
+                      </p>
+                    </motion.div>
+                  ) : isLoading ? (
+                    <div className="flex flex-col items-center">
+                      <div className="mb-3 h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                      <p className="text-xs text-muted-foreground">
+                        {t("common.loading") || "加载中..."}
+                      </p>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-white/[0.04]">
+                        <ImageIcon className="h-7 w-7 text-muted-foreground/60" />
+                      </div>
+                      <p className="mb-1 text-sm font-medium">
+                        {t("atlas.dropSprites") || "拖拽精灵图到这里"}
+                      </p>
+                      <p className="mb-4 text-xs text-muted-foreground/60">
+                        {t("atlas.supportFolder") || "支持拖拽文件夹上传"}
+                      </p>
+                      <div className="flex flex-col gap-2 w-full px-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="w-full rounded-xl border-white/[0.08] hover:bg-white/[0.06]"
+                          onClick={() => fileInputRef.current?.click()}
+                        >
+                          <ImageIcon className="mr-1.5 h-3.5 w-3.5" />
+                          {t("atlas.selectFiles") || "选择文件"}
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="w-full rounded-xl border-white/[0.08] hover:bg-white/[0.06]"
+                          onClick={() => folderInputRef.current?.click()}
+                        >
+                          <Folder className="mr-1.5 h-3.5 w-3.5" />
+                          {t("atlas.selectFolder") || "选择文件夹"}
+                        </Button>
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Hidden file inputs */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept="image/png,image/jpeg,image/webp,image/gif,image/bmp"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+      <input
+        ref={folderInputRef}
+        type="file"
+        multiple
+        accept="image/png,image/jpeg,image/webp,image/gif,image/bmp"
+        // @ts-expect-error - webkitdirectory is not in the type definition
+        webkitdirectory="true"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+
+      {/* Drag overlay */}
+      <AnimatePresence>
+        {isDragging && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 z-50 flex items-center justify-center bg-primary/10 backdrop-blur-sm"
+          >
+            <div className="rounded-lg border-2 border-dashed border-primary bg-background/80 px-8 py-6 text-center">
+              <Upload className="mx-auto mb-2 h-8 w-8 text-primary" />
+              <p className="font-medium text-primary">
+                {t("uploader.dropActive") || "释放文件即可上传"}
+              </p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

src/components/tools/atlas/index.ts

@@ -0,0 +1,4 @@
+export { FileListPanel } from "./FileListPanel";
+export { CanvasPreview } from "./CanvasPreview";
+export { AtlasConfigPanel } from "./AtlasConfigPanel";
+export { AnimationPreviewDialog } from "./AnimationPreviewDialog";

src/components/ui/dialog.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-4xl translate-x-[-50%] translate-y-[-50%] gap-4 border border-border/40 bg-background/95 p-6 shadow-lg backdrop-blur-md duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-5 w-5" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <span className="h-2 w-2 rounded-full bg-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

src/hooks/useAtlasWorker.ts

@@ -0,0 +1,609 @@
+/**
+ * Hook for managing Atlas Worker communication
+ * Supports multi-atlas mode and PNG compression
+ */
+
+import { useRef, useCallback, useEffect } from "react";
+import { useAtlasStore, type BrowserSprite, type AtlasResult, type SingleAtlasResult } from "@/store/atlasStore";
+import type { TextureAtlasConfig, AtlasFrame } from "@/types";
+import type { PackerPlacement, SinglePackerResult } from "@/lib/atlas-packer";
+
+interface WorkerInputMessage {
+  type: "pack";
+  sprites: { id: string; name: string; width: number; height: number }[];
+  config: TextureAtlasConfig;
+  enableMultiAtlas: boolean;
+}
+
+interface WorkerOutputMessage {
+  type: "result" | "progress" | "error";
+  result?: {
+    atlases: SinglePackerResult[];
+    packedCount: number;
+    unpackedSprites: { id: string; name: string; width: number; height: number }[];
+  };
+  progress?: number;
+  error?: string;
+}
+
+/**
+ * Render sprites to canvas and get data URL
+ * Always returns uncompressed data URL for preview
+ */
+async function renderAtlasToCanvas(
+  sprites: BrowserSprite[],
+  placements: PackerPlacement[],
+  width: number,
+  height: number
+): Promise<string> {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+
+  // Clear canvas (transparent background)
+  ctx.clearRect(0, 0, width, height);
+
+  // Create sprite lookup
+  const spriteMap = new Map(sprites.map((s) => [s.id, s]));
+
+  // Draw each sprite
+  for (const placement of placements) {
+    const sprite = spriteMap.get(placement.id);
+    if (!sprite) continue;
+
+    ctx.save();
+
+    if (placement.rotated) {
+      // Rotate 90 degrees clockwise
+      ctx.translate(placement.x + placement.height, placement.y);
+      ctx.rotate(Math.PI / 2);
+      ctx.drawImage(sprite.image, 0, 0);
+    } else {
+      ctx.drawImage(sprite.image, placement.x, placement.y);
+    }
+
+    ctx.restore();
+  }
+
+  return canvas.toDataURL("image/png");
+}
+
+/**
+ * Build AtlasFrame array from placements
+ */
+function buildFrames(placements: PackerPlacement[]): AtlasFrame[] {
+  return placements.map((p) => {
+    const w = p.rotated ? p.height : p.width;
+    const h = p.rotated ? p.width : p.height;
+    
+    return {
+      filename: p.name,
+      frame: { x: p.x, y: p.y, width: w, height: h },
+      rotated: p.rotated,
+      trimmed: false,
+      spriteSourceSize: { x: 0, y: 0, w: p.width, h: p.height },
+      sourceSize: { w: p.width, h: p.height },
+    };
+  });
+}
+
+export function useAtlasWorker() {
+  const workerRef = useRef<Worker | null>(null);
+  const { sprites, config, enableMultiAtlas, setStatus, setProgress, setError, setResult } = useAtlasStore();
+
+  // Initialize worker
+  useEffect(() => {
+    // Create worker from blob to avoid bundler issues
+    const workerCode = `
+      // Worker code is loaded inline
+      ${getWorkerCode()}
+    `;
+    
+    const blob = new Blob([workerCode], { type: "application/javascript" });
+    const workerUrl = URL.createObjectURL(blob);
+    workerRef.current = new Worker(workerUrl);
+
+    workerRef.current.onmessage = async (event: MessageEvent<WorkerOutputMessage>) => {
+      const { type, result, progress, error } = event.data;
+
+      if (type === "progress" && progress !== undefined) {
+        setProgress(progress * 0.5); // Packing is 50% of total progress
+      } else if (type === "result" && result) {
+        setStatus("rendering");
+        setProgress(50);
+
+        try {
+          const currentSprites = useAtlasStore.getState().sprites;
+          const atlasCount = result.atlases.length;
+          const atlasResults: SingleAtlasResult[] = [];
+          
+          // Render each atlas
+          for (let i = 0; i < atlasCount; i++) {
+            const atlas = result.atlases[i];
+            
+            const imageDataUrl = await renderAtlasToCanvas(
+              currentSprites,
+              atlas.placements,
+              atlas.width,
+              atlas.height
+            );
+
+            const frames = buildFrames(atlas.placements);
+
+            atlasResults.push({
+              index: atlas.index,
+              width: atlas.width,
+              height: atlas.height,
+              placements: atlas.placements,
+              frames,
+              imageDataUrl,
+              spriteIds: atlas.spriteIds,
+            });
+            
+            // Update progress for rendering
+            setProgress(50 + ((i + 1) / atlasCount) * 50);
+          }
+          
+          // Extract unpacked sprite IDs
+          const unpackedSpriteIds = result.unpackedSprites.map(s => s.id);
+
+          const atlasResult: AtlasResult = {
+            atlases: atlasResults,
+            packedCount: result.packedCount,
+            unpackedSpriteIds,
+          };
+
+          setResult(atlasResult);
+          setProgress(100);
+        } catch (renderError) {
+          setError(renderError instanceof Error ? renderError.message : "Render failed");
+        }
+      } else if (type === "error" && error) {
+        setError(error);
+      }
+    };
+
+    workerRef.current.onerror = (error) => {
+      console.error("Worker error:", error);
+      setError("Worker error: " + error.message);
+    };
+
+    return () => {
+      if (workerRef.current) {
+        workerRef.current.terminate();
+        URL.revokeObjectURL(workerUrl);
+      }
+    };
+  }, [setStatus, setProgress, setError, setResult]);
+
+  // Pack function
+  const pack = useCallback(() => {
+    if (!workerRef.current || sprites.length === 0) {
+      return;
+    }
+
+    setStatus("packing");
+    setProgress(0);
+    setError(null);
+
+    const message: WorkerInputMessage = {
+      type: "pack",
+      sprites: sprites.map((s) => ({
+        id: s.id,
+        name: s.name,
+        width: s.width,
+        height: s.height,
+      })),
+      config,
+      enableMultiAtlas,
+    };
+
+    workerRef.current.postMessage(message);
+  }, [sprites, config, enableMultiAtlas, setStatus, setProgress, setError]);
+
+  return { pack };
+}
+
+/**
+ * Get worker code as string
+ * This is necessary because Next.js doesn't support worker imports easily
+ */
+function getWorkerCode(): string {
+  return `
+function nextPowerOfTwo(value) {
+  return Math.pow(2, Math.ceil(Math.log2(value)));
+}
+
+function adjustSizeForPot(value, pot) {
+  return pot ? nextPowerOfTwo(value) : value;
+}
+
+function sortSpritesBySize(sprites) {
+  return [...sprites].sort((a, b) => {
+    const maxA = Math.max(a.width, a.height);
+    const maxB = Math.max(b.width, b.height);
+    if (maxA !== maxB) return maxB - maxA;
+    const areaA = a.width * a.height;
+    const areaB = b.width * b.height;
+    if (areaB !== areaA) return areaB - areaA;
+    return (b.width + b.height) - (a.width + a.height);
+  });
+}
+
+class MaxRectsPacker {
+  constructor(width, height, allowRotation) {
+    this.binWidth = width;
+    this.binHeight = height;
+    this.allowRotation = allowRotation;
+    this.usedRectangles = [];
+    this.freeRectangles = [{ x: 0, y: 0, width, height }];
+  }
+
+  insert(width, height) {
+    let bestNode = this.findPositionBestAreaFit(width, height);
+    let rotated = false;
+
+    if (this.allowRotation && width !== height) {
+      const rotatedNode = this.findPositionBestAreaFit(height, width);
+      if (!bestNode || (rotatedNode && rotatedNode.height * rotatedNode.width < bestNode.height * bestNode.width)) {
+        bestNode = rotatedNode;
+        rotated = true;
+        [width, height] = [height, width];
+      }
+    }
+
+    if (!bestNode) return null;
+
+    this.splitFreeRectangles(bestNode, width, height);
+    this.usedRectangles.push({ x: bestNode.x, y: bestNode.y, width, height });
+
+    return { x: bestNode.x, y: bestNode.y, rotated };
+  }
+
+  findPositionBestAreaFit(width, height) {
+    let bestNode = null;
+    let bestAreaFit = Number.MAX_VALUE;
+    let bestShortSideFit = Number.MAX_VALUE;
+
+    for (const rect of this.freeRectangles) {
+      const areaFit = rect.width * rect.height - width * height;
+      if (rect.width >= width && rect.height >= height) {
+        const leftoverHoriz = Math.abs(rect.width - width);
+        const leftoverVert = Math.abs(rect.height - height);
+        const shortSideFit = Math.min(leftoverHoriz, leftoverVert);
+        if (areaFit < bestAreaFit || (areaFit === bestAreaFit && shortSideFit < bestShortSideFit)) {
+          bestNode = { x: rect.x, y: rect.y, width, height };
+          bestShortSideFit = shortSideFit;
+          bestAreaFit = areaFit;
+        }
+      }
+    }
+    return bestNode;
+  }
+
+  splitFreeRectangles(node, width, height) {
+    for (let i = this.freeRectangles.length - 1; i >= 0; i--) {
+      const freeRect = this.freeRectangles[i];
+      if (this.splitFreeRectangle(freeRect, node, width, height)) {
+        this.freeRectangles.splice(i, 1);
+      }
+    }
+    this.freeRectangles = this.freeRectangles.filter(r => r.width > 0 && r.height > 0);
+    this.pruneFreeRectangles();
+  }
+
+  splitFreeRectangle(freeRect, usedNode, width, height) {
+    if (freeRect.x >= usedNode.x + width || freeRect.x + freeRect.width <= usedNode.x ||
+        freeRect.y >= usedNode.y + height || freeRect.y + freeRect.height <= usedNode.y) {
+      return false;
+    }
+
+    if (freeRect.x < usedNode.x) {
+      this.freeRectangles.push({ x: freeRect.x, y: freeRect.y, width: usedNode.x - freeRect.x, height: freeRect.height });
+    }
+    if (freeRect.x + freeRect.width > usedNode.x + width) {
+      this.freeRectangles.push({ x: usedNode.x + width, y: freeRect.y, width: freeRect.x + freeRect.width - (usedNode.x + width), height: freeRect.height });
+    }
+    if (freeRect.y < usedNode.y) {
+      this.freeRectangles.push({ x: freeRect.x, y: freeRect.y, width: freeRect.width, height: usedNode.y - freeRect.y });
+    }
+    if (freeRect.y + freeRect.height > usedNode.y + height) {
+      this.freeRectangles.push({ x: freeRect.x, y: usedNode.y + height, width: freeRect.width, height: freeRect.y + freeRect.height - (usedNode.y + height) });
+    }
+    return true;
+  }
+
+  pruneFreeRectangles() {
+    for (let i = 0; i < this.freeRectangles.length; i++) {
+      for (let j = i + 1; j < this.freeRectangles.length; j++) {
+        if (this.isContainedIn(this.freeRectangles[i], this.freeRectangles[j])) {
+          this.freeRectangles.splice(i, 1);
+          i--;
+          break;
+        }
+        if (this.isContainedIn(this.freeRectangles[j], this.freeRectangles[i])) {
+          this.freeRectangles.splice(j, 1);
+          j--;
+        }
+      }
+    }
+  }
+
+  isContainedIn(a, b) {
+    return a.x >= b.x && a.y >= b.y && a.x + a.width <= b.x + b.width && a.y + a.height <= b.y + b.height;
+  }
+}
+
+class ShelfPacker {
+  constructor(binWidth, binHeight, allowRotation, padding) {
+    this.binWidth = binWidth;
+    this.binHeight = binHeight;
+    this.allowRotation = allowRotation;
+    this.padding = padding;
+    this.shelves = [];
+    this.currentY = 0;
+  }
+
+  insert(width, height) {
+    const paddedWidth = width + this.padding;
+    const paddedHeight = height + this.padding;
+
+    for (const shelf of this.shelves) {
+      if (this.allowRotation && width !== height) {
+        if (shelf.currentX + height + this.padding <= this.binWidth && shelf.y + width <= this.binHeight) {
+          const result = { x: shelf.currentX, y: shelf.y, rotated: true };
+          shelf.currentX += height + this.padding;
+          shelf.height = Math.max(shelf.height, width + this.padding);
+          return result;
+        }
+      }
+      if (shelf.currentX + paddedWidth <= this.binWidth && shelf.y + height <= this.binHeight) {
+        const result = { x: shelf.currentX, y: shelf.y, rotated: false };
+        shelf.currentX += paddedWidth;
+        shelf.height = Math.max(shelf.height, paddedHeight);
+        return result;
+      }
+    }
+
+    const newShelfY = this.currentY;
+    if (newShelfY + paddedHeight > this.binHeight) return null;
+
+    const newShelf = { y: newShelfY, currentX: 0, height: paddedHeight };
+
+    if (this.allowRotation && width !== height) {
+      if (newShelf.currentX + height + this.padding <= this.binWidth) {
+        newShelf.currentX = height + this.padding;
+        newShelf.height = Math.max(newShelf.height, width + this.padding);
+        this.shelves.push(newShelf);
+        this.currentY += newShelf.height;
+        return { x: 0, y: newShelfY, rotated: true };
+      }
+    }
+
+    if (newShelf.currentX + paddedWidth <= this.binWidth) {
+      newShelf.currentX = paddedWidth;
+      this.shelves.push(newShelf);
+      this.currentY += newShelf.height;
+      return { x: 0, y: newShelfY, rotated: false };
+    }
+
+    return null;
+  }
+}
+
+function packSingleAtlas(sprites, config, atlasIndex) {
+  const padding = config.padding;
+  let packWidth = config.maxWidth;
+  let packHeight = config.maxHeight;
+  
+  if (config.pot) {
+    packWidth = adjustSizeForPot(packWidth, true);
+    packHeight = adjustSizeForPot(packHeight, true);
+    packWidth = Math.min(packWidth, config.maxWidth);
+    packHeight = Math.min(packHeight, config.maxHeight);
+  }
+
+  const sortedSprites = sortSpritesBySize(sprites);
+  const placements = new Map();
+  const unpackedSprites = [];
+  
+  if (config.algorithm === "MaxRects") {
+    const packer = new MaxRectsPacker(packWidth, packHeight, config.allowRotation);
+    
+    for (const sprite of sortedSprites) {
+      const paddedWidth = sprite.width + padding * 2;
+      const paddedHeight = sprite.height + padding * 2;
+      
+      if (paddedWidth > packWidth || paddedHeight > packHeight) {
+        if (config.allowRotation && paddedHeight <= packWidth && paddedWidth <= packHeight) {
+          const position = packer.insert(paddedHeight, paddedWidth);
+          if (position) {
+            placements.set(sprite.id, {
+              x: position.x + padding,
+              y: position.y + padding,
+              width: sprite.width,
+              height: sprite.height,
+              rotated: true,
+            });
+            continue;
+          }
+        }
+        unpackedSprites.push(sprite);
+        continue;
+      }
+      
+      const position = packer.insert(paddedWidth, paddedHeight);
+      if (position) {
+        placements.set(sprite.id, {
+          x: position.x + padding,
+          y: position.y + padding,
+          width: sprite.width,
+          height: sprite.height,
+          rotated: position.rotated,
+        });
+      } else {
+        unpackedSprites.push(sprite);
+      }
+    }
+  } else {
+    const packer = new ShelfPacker(packWidth, packHeight, config.allowRotation, padding);
+    
+    for (const sprite of sortedSprites) {
+      const paddedWidth = sprite.width + padding * 2;
+      const paddedHeight = sprite.height + padding * 2;
+      
+      if (paddedWidth > packWidth || paddedHeight > packHeight) {
+        if (config.allowRotation && paddedHeight <= packWidth && paddedWidth <= packHeight) {
+          const position = packer.insert(sprite.height, sprite.width);
+          if (position) {
+            placements.set(sprite.id, {
+              x: position.x + padding,
+              y: position.y + padding,
+              width: sprite.width,
+              height: sprite.height,
+              rotated: true,
+            });
+            continue;
+          }
+        }
+        unpackedSprites.push(sprite);
+        continue;
+      }
+      
+      const position = packer.insert(sprite.width, sprite.height);
+      if (position) {
+        placements.set(sprite.id, {
+          x: position.x + padding,
+          y: position.y + padding,
+          width: sprite.width,
+          height: sprite.height,
+          rotated: position.rotated,
+        });
+      } else {
+        unpackedSprites.push(sprite);
+      }
+    }
+  }
+
+  let maxX = 0, maxY = 0;
+  for (const p of placements.values()) {
+    const effectiveWidth = p.rotated ? p.height : p.width;
+    const effectiveHeight = p.rotated ? p.width : p.height;
+    maxX = Math.max(maxX, p.x + effectiveWidth + padding);
+    maxY = Math.max(maxY, p.y + effectiveHeight + padding);
+  }
+
+  let finalWidth, finalHeight;
+  
+  if (config.pot) {
+    finalWidth = adjustSizeForPot(Math.ceil(maxX), true);
+    finalHeight = adjustSizeForPot(Math.ceil(maxY), true);
+    finalWidth = Math.min(finalWidth, config.maxWidth);
+    finalHeight = Math.min(finalHeight, config.maxHeight);
+  } else {
+    finalWidth = Math.ceil(maxX);
+    finalHeight = Math.ceil(maxY);
+    finalWidth = Math.min(finalWidth, config.maxWidth);
+    finalHeight = Math.min(finalHeight, config.maxHeight);
+  }
+
+  const resultPlacements = [];
+  const spriteIds = [];
+  
+  for (const sprite of sprites) {
+    const placement = placements.get(sprite.id);
+    if (placement) {
+      resultPlacements.push({ id: sprite.id, name: sprite.name, ...placement });
+      spriteIds.push(sprite.id);
+    }
+  }
+
+  return {
+    result: {
+      index: atlasIndex,
+      width: finalWidth || 1,
+      height: finalHeight || 1,
+      placements: resultPlacements,
+      spriteIds,
+    },
+    unpackedSprites,
+  };
+}
+
+function packSprites(sprites, config, enableMultiAtlas, postProgress) {
+  if (sprites.length === 0) return null;
+
+  const atlases = [];
+  let remainingSprites = [...sprites];
+  let atlasIndex = 0;
+  let totalProcessed = 0;
+  
+  while (remainingSprites.length > 0) {
+    const { result, unpackedSprites } = packSingleAtlas(remainingSprites, config, atlasIndex);
+    
+    if (result.placements.length === 0) {
+      break;
+    }
+    
+    atlases.push(result);
+    totalProcessed += result.placements.length;
+    postProgress((totalProcessed / sprites.length) * 100);
+    
+    if (!enableMultiAtlas) {
+      return {
+        atlases,
+        packedCount: result.placements.length,
+        unpackedSprites,
+      };
+    }
+    
+    remainingSprites = unpackedSprites;
+    atlasIndex++;
+    
+    if (atlasIndex > 100) {
+      console.warn("Max atlas limit reached");
+      break;
+    }
+  }
+  
+  if (atlases.length === 0) {
+    return null;
+  }
+
+  const totalPacked = atlases.reduce((sum, a) => sum + a.placements.length, 0);
+  
+  return {
+    atlases,
+    packedCount: totalPacked,
+    unpackedSprites: remainingSprites,
+  };
+}
+
+self.onmessage = function(event) {
+  const { type, sprites, config, enableMultiAtlas } = event.data;
+
+  if (type === "pack") {
+    try {
+      const postProgress = (progress) => {
+        self.postMessage({ type: "progress", progress });
+      };
+
+      const result = packSprites(sprites, config, enableMultiAtlas, postProgress);
+
+      if (result) {
+        self.postMessage({ type: "result", result });
+      } else {
+        self.postMessage({ type: "error", error: "No sprites could be packed. Check sprite sizes and max dimensions." });
+      }
+    } catch (error) {
+      self.postMessage({ type: "error", error: error.message || "Unknown error" });
+    }
+  }
+};
+`;
+}

src/lib/api.ts

@@ -1,4 +1,10 @@
-import { type ApiResponse, type UploadResponse } from "@/types";
+import { 
+  type ApiResponse, 
+  type UploadResponse, 
+  type VideoFramesConfig, 
+  type ImageCompressConfig, 
+  type AudioCompressConfig 
+} from "@/types";
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "";
 
@@ -72,7 +78,7 @@ export async function uploadFile(file: File, _onProgress?: (progress: number) =>
 /**
  * Process video to frames
  */
-export async function processVideoFrames(fileId: string, config: any) {
+export async function processVideoFrames(fileId: string, config: VideoFramesConfig) {
   return apiClient("/process/video-frames", {
     method: "POST",
     body: JSON.stringify({ fileId, config }),
@@ -82,7 +88,7 @@ export async function processVideoFrames(fileId: string, config: any) {
 /**
  * Process image compression
  */
-export async function processImageCompression(fileId: string, config: any) {
+export async function processImageCompression(fileId: string, config: ImageCompressConfig) {
   return apiClient("/process/image-compress", {
     method: "POST",
     body: JSON.stringify({ fileId, config }),
@@ -92,7 +98,7 @@ export async function processImageCompression(fileId: string, config: any) {
 /**
  * Process audio compression
  */
-export async function processAudioCompression(fileId: string, config: any) {
+export async function processAudioCompression(fileId: string, config: AudioCompressConfig) {
   return apiClient("/process/audio-compress", {
     method: "POST",
     body: JSON.stringify({ fileId, config }),

src/lib/atlas-packer.ts

@@ -0,0 +1,720 @@
+/**
+ * Browser-side Texture Atlas Packing Algorithms
+ * Implements MaxRects and Shelf algorithms for packing sprites
+ * Supports multi-atlas mode (like TexturePacker)
+ */
+
+import type { TextureAtlasConfig } from "@/types";
+
+/**
+ * Rectangle definition
+ */
+interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Sprite input for packing
+ */
+export interface PackerSprite {
+  id: string;
+  name: string;
+  width: number;
+  height: number;
+}
+
+/**
+ * Packing result for a single sprite
+ */
+export interface PackerPlacement {
+  id: string;
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotated: boolean;
+}
+
+/**
+ * Single atlas packing result
+ */
+export interface SinglePackerResult {
+  index: number;
+  width: number;
+  height: number;
+  placements: PackerPlacement[];
+  spriteIds: string[];
+}
+
+/**
+ * Complete packing result (supports multiple atlases)
+ */
+export interface PackerResult {
+  atlases: SinglePackerResult[];
+  packedCount: number;
+  /** Sprites that couldn't fit (only when multi-atlas is disabled) */
+  unpackedSprites: PackerSprite[];
+}
+
+/**
+ * Calculate the next power of two
+ */
+function nextPowerOfTwo(value: number): number {
+  return Math.pow(2, Math.ceil(Math.log2(value)));
+}
+
+/**
+ * Adjust size for power of two if required
+ */
+function adjustSizeForPot(value: number, pot: boolean): number {
+  return pot ? nextPowerOfTwo(value) : value;
+}
+
+/**
+ * Sort sprites by size (largest first)
+ */
+function sortSpritesBySize<T extends { width: number; height: number }>(sprites: T[]): T[] {
+  return [...sprites].sort((a, b) => {
+    const maxA = Math.max(a.width, a.height);
+    const maxB = Math.max(b.width, b.height);
+    if (maxA !== maxB) return maxB - maxA;
+    
+    const areaA = a.width * a.height;
+    const areaB = b.width * b.height;
+    if (areaB !== areaA) return areaB - areaA;
+    
+    return (b.width + b.height) - (a.width + a.height);
+  });
+}
+
+/**
+ * MaxRects Packing Algorithm
+ * Best for general purpose packing with good space efficiency
+ */
+class MaxRectsPacker {
+  private usedRectangles: Rectangle[] = [];
+  private freeRectangles: Rectangle[] = [];
+  private allowRotation: boolean;
+
+  constructor(width: number, height: number, allowRotation: boolean) {
+    this.allowRotation = allowRotation;
+    this.freeRectangles.push({ x: 0, y: 0, width, height });
+  }
+
+  /**
+   * Insert a rectangle and return its position
+   */
+  insert(width: number, height: number): { x: number; y: number; rotated: boolean } | null {
+    let bestNode = this.findPositionForNewNodeBestAreaFit(width, height);
+    let rotated = false;
+
+    // Try rotated version if allowed
+    if (this.allowRotation && width !== height) {
+      const rotatedNode = this.findPositionForNewNodeBestAreaFit(height, width);
+      if (
+        !bestNode ||
+        (rotatedNode && rotatedNode.height * rotatedNode.width < bestNode.height * bestNode.width)
+      ) {
+        bestNode = rotatedNode;
+        rotated = true;
+        [width, height] = [height, width];
+      }
+    }
+
+    if (!bestNode) {
+      return null;
+    }
+
+    this.splitFreeRectangles(bestNode, width, height);
+
+    this.usedRectangles.push({
+      x: bestNode.x,
+      y: bestNode.y,
+      width,
+      height,
+    });
+
+    return { x: bestNode.x, y: bestNode.y, rotated };
+  }
+
+  /**
+   * Find the best position using Best Area Fit heuristic
+   */
+  private findPositionForNewNodeBestAreaFit(
+    width: number,
+    height: number
+  ): Rectangle | null {
+    let bestNode: Rectangle | null = null;
+    let bestAreaFit = Number.MAX_VALUE;
+    let bestShortSideFit = Number.MAX_VALUE;
+
+    for (const rect of this.freeRectangles) {
+      const areaFit = rect.width * rect.height - width * height;
+
+      if (rect.width >= width && rect.height >= height) {
+        const leftoverHoriz = Math.abs(rect.width - width);
+        const leftoverVert = Math.abs(rect.height - height);
+        const shortSideFit = Math.min(leftoverHoriz, leftoverVert);
+
+        if (areaFit < bestAreaFit || (areaFit === bestAreaFit && shortSideFit < bestShortSideFit)) {
+          bestNode = { x: rect.x, y: rect.y, width, height };
+          bestShortSideFit = shortSideFit;
+          bestAreaFit = areaFit;
+        }
+      }
+    }
+
+    return bestNode;
+  }
+
+  /**
+   * Split free rectangles after placing a rectangle
+   */
+  private splitFreeRectangles(node: Rectangle, width: number, height: number): void {
+    for (let i = this.freeRectangles.length - 1; i >= 0; i--) {
+      const freeRect = this.freeRectangles[i];
+      if (this.splitFreeRectangle(freeRect, node, width, height)) {
+        this.freeRectangles.splice(i, 1);
+      }
+    }
+
+    this.freeRectangles = this.freeRectangles.filter(
+      (rect) => rect.width > 0 && rect.height > 0
+    );
+    
+    this.pruneFreeRectangles();
+  }
+
+  /**
+   * Split a single free rectangle
+   */
+  private splitFreeRectangle(
+    freeRect: Rectangle,
+    usedNode: Rectangle,
+    width: number,
+    height: number
+  ): boolean {
+    if (
+      freeRect.x >= usedNode.x + width ||
+      freeRect.x + freeRect.width <= usedNode.x ||
+      freeRect.y >= usedNode.y + height ||
+      freeRect.y + freeRect.height <= usedNode.y
+    ) {
+      return false;
+    }
+
+    if (freeRect.x < usedNode.x) {
+      this.freeRectangles.push({
+        x: freeRect.x,
+        y: freeRect.y,
+        width: usedNode.x - freeRect.x,
+        height: freeRect.height,
+      });
+    }
+
+    if (freeRect.x + freeRect.width > usedNode.x + width) {
+      this.freeRectangles.push({
+        x: usedNode.x + width,
+        y: freeRect.y,
+        width: freeRect.x + freeRect.width - (usedNode.x + width),
+        height: freeRect.height,
+      });
+    }
+
+    if (freeRect.y < usedNode.y) {
+      this.freeRectangles.push({
+        x: freeRect.x,
+        y: freeRect.y,
+        width: freeRect.width,
+        height: usedNode.y - freeRect.y,
+      });
+    }
+
+    if (freeRect.y + freeRect.height > usedNode.y + height) {
+      this.freeRectangles.push({
+        x: freeRect.x,
+        y: usedNode.y + height,
+        width: freeRect.width,
+        height: freeRect.y + freeRect.height - (usedNode.y + height),
+      });
+    }
+
+    return true;
+  }
+
+  /**
+   * Remove redundant free rectangles
+   */
+  private pruneFreeRectangles(): void {
+    for (let i = 0; i < this.freeRectangles.length; i++) {
+      for (let j = i + 1; j < this.freeRectangles.length; j++) {
+        if (this.isContainedIn(this.freeRectangles[i], this.freeRectangles[j])) {
+          this.freeRectangles.splice(i, 1);
+          i--;
+          break;
+        }
+        if (this.isContainedIn(this.freeRectangles[j], this.freeRectangles[i])) {
+          this.freeRectangles.splice(j, 1);
+          j--;
+        }
+      }
+    }
+  }
+
+  /**
+   * Check if rectangle a is contained within rectangle b
+   */
+  private isContainedIn(a: Rectangle, b: Rectangle): boolean {
+    return (
+      a.x >= b.x &&
+      a.y >= b.y &&
+      a.x + a.width <= b.x + b.width &&
+      a.y + a.height <= b.y + b.height
+    );
+  }
+}
+
+/**
+ * Shelf Packing Algorithm
+ * Simple and fast algorithm that packs sprites in horizontal shelves
+ */
+class ShelfPacker {
+  private shelves: { y: number; currentX: number; height: number }[] = [];
+  private currentY = 0;
+  private allowRotation: boolean;
+  private binWidth: number;
+  private binHeight: number;
+  private padding: number;
+
+  constructor(binWidth: number, binHeight: number, allowRotation: boolean, padding: number) {
+    this.binWidth = binWidth;
+    this.binHeight = binHeight;
+    this.allowRotation = allowRotation;
+    this.padding = padding;
+  }
+
+  /**
+   * Insert a rectangle
+   */
+  insert(width: number, height: number): { x: number; y: number; rotated: boolean } | null {
+    const paddedWidth = width + this.padding;
+    const paddedHeight = height + this.padding;
+
+    // Try to fit in existing shelves
+    for (const shelf of this.shelves) {
+      if (this.allowRotation && width !== height) {
+        if (shelf.currentX + height + this.padding <= this.binWidth && 
+            shelf.y + width <= this.binHeight) {
+          const result = { x: shelf.currentX, y: shelf.y, rotated: true };
+          shelf.currentX += height + this.padding;
+          shelf.height = Math.max(shelf.height, width + this.padding);
+          return result;
+        }
+      }
+
+      if (shelf.currentX + paddedWidth <= this.binWidth && 
+          shelf.y + height <= this.binHeight) {
+        const result = { x: shelf.currentX, y: shelf.y, rotated: false };
+        shelf.currentX += paddedWidth;
+        shelf.height = Math.max(shelf.height, paddedHeight);
+        return result;
+      }
+    }
+
+    // Create a new shelf
+    const newShelfY = this.currentY;
+    if (newShelfY + paddedHeight > this.binHeight) {
+      return null;
+    }
+
+    const newShelf = {
+      y: newShelfY,
+      currentX: 0,
+      height: paddedHeight,
+    };
+
+    if (this.allowRotation && width !== height) {
+      if (newShelf.currentX + height + this.padding <= this.binWidth) {
+        newShelf.currentX = height + this.padding;
+        newShelf.height = Math.max(newShelf.height, width + this.padding);
+        this.shelves.push(newShelf);
+        this.currentY += newShelf.height;
+        return { x: 0, y: newShelfY, rotated: true };
+      }
+    }
+
+    if (newShelf.currentX + paddedWidth <= this.binWidth) {
+      newShelf.currentX = paddedWidth;
+      this.shelves.push(newShelf);
+      this.currentY += newShelf.height;
+      return { x: 0, y: newShelfY, rotated: false };
+    }
+
+    return null;
+  }
+}
+
+/**
+ * Pack sprites into a single atlas
+ * Returns placements and unpacked sprites
+ */
+function packSingleAtlas(
+  sprites: PackerSprite[],
+  config: TextureAtlasConfig,
+  atlasIndex: number
+): { result: SinglePackerResult; unpackedSprites: PackerSprite[] } {
+  const padding = config.padding;
+  
+  // Use the max dimensions directly for packing
+  let packWidth = config.maxWidth;
+  let packHeight = config.maxHeight;
+  
+  // For POT mode, ensure dimensions are power of two
+  if (config.pot) {
+    packWidth = adjustSizeForPot(packWidth, true);
+    packHeight = adjustSizeForPot(packHeight, true);
+    // Clamp to max
+    packWidth = Math.min(packWidth, config.maxWidth);
+    packHeight = Math.min(packHeight, config.maxHeight);
+  }
+
+  // Sort sprites by size (largest first) for better packing
+  const sortedSprites = sortSpritesBySize(sprites);
+  
+  // Pack sprites one by one, tracking which ones fit
+  const placements = new Map<string, { x: number; y: number; width: number; height: number; rotated: boolean }>();
+  const unpackedSprites: PackerSprite[] = [];
+  
+  // Create packer with max dimensions
+  if (config.algorithm === "MaxRects") {
+    const packer = new MaxRectsPacker(packWidth, packHeight, config.allowRotation);
+    
+    for (const sprite of sortedSprites) {
+      const paddedWidth = sprite.width + padding * 2;
+      const paddedHeight = sprite.height + padding * 2;
+      
+      // Check if sprite is too large even without packing
+      if (paddedWidth > packWidth || paddedHeight > packHeight) {
+        // Try rotated if allowed
+        if (config.allowRotation && paddedHeight <= packWidth && paddedWidth <= packHeight) {
+          const position = packer.insert(paddedHeight, paddedWidth);
+          if (position) {
+            placements.set(sprite.id, {
+              x: position.x + padding,
+              y: position.y + padding,
+              width: sprite.width,
+              height: sprite.height,
+              rotated: true,
+            });
+            continue;
+          }
+        }
+        unpackedSprites.push(sprite);
+        continue;
+      }
+      
+      const position = packer.insert(paddedWidth, paddedHeight);
+      if (position) {
+        placements.set(sprite.id, {
+          x: position.x + padding,
+          y: position.y + padding,
+          width: sprite.width,
+          height: sprite.height,
+          rotated: position.rotated,
+        });
+      } else {
+        unpackedSprites.push(sprite);
+      }
+    }
+  } else {
+    // Shelf algorithm
+    const packer = new ShelfPacker(packWidth, packHeight, config.allowRotation, padding);
+    
+    for (const sprite of sortedSprites) {
+      const paddedWidth = sprite.width + padding * 2;
+      const paddedHeight = sprite.height + padding * 2;
+      
+      // Check if sprite is too large
+      if (paddedWidth > packWidth || paddedHeight > packHeight) {
+        if (config.allowRotation && paddedHeight <= packWidth && paddedWidth <= packHeight) {
+          const position = packer.insert(sprite.height, sprite.width);
+          if (position) {
+            placements.set(sprite.id, {
+              x: position.x + padding,
+              y: position.y + padding,
+              width: sprite.width,
+              height: sprite.height,
+              rotated: true,
+            });
+            continue;
+          }
+        }
+        unpackedSprites.push(sprite);
+        continue;
+      }
+      
+      const position = packer.insert(sprite.width, sprite.height);
+      if (position) {
+        placements.set(sprite.id, {
+          x: position.x + padding,
+          y: position.y + padding,
+          width: sprite.width,
+          height: sprite.height,
+          rotated: position.rotated,
+        });
+      } else {
+        unpackedSprites.push(sprite);
+      }
+    }
+  }
+
+  // Calculate actual dimensions based on sprite placements
+  let maxX = 0;
+  let maxY = 0;
+  for (const placement of placements.values()) {
+    const effectiveWidth = placement.rotated ? placement.height : placement.width;
+    const effectiveHeight = placement.rotated ? placement.width : placement.height;
+    maxX = Math.max(maxX, placement.x + effectiveWidth + padding);
+    maxY = Math.max(maxY, placement.y + effectiveHeight + padding);
+  }
+
+  // Calculate the minimum required dimensions
+  let finalWidth: number;
+  let finalHeight: number;
+  
+  if (config.pot) {
+    finalWidth = nextPowerOfTwo(Math.ceil(maxX));
+    finalHeight = nextPowerOfTwo(Math.ceil(maxY));
+    finalWidth = Math.min(finalWidth, config.maxWidth);
+    finalHeight = Math.min(finalHeight, config.maxHeight);
+  } else {
+    finalWidth = Math.ceil(maxX);
+    finalHeight = Math.ceil(maxY);
+    finalWidth = Math.min(finalWidth, config.maxWidth);
+    finalHeight = Math.min(finalHeight, config.maxHeight);
+  }
+
+  // Build result placements in original order
+  const resultPlacements: PackerPlacement[] = [];
+  const spriteIds: string[] = [];
+  
+  for (const sprite of sprites) {
+    const placement = placements.get(sprite.id);
+    if (placement) {
+      resultPlacements.push({
+        id: sprite.id,
+        name: sprite.name,
+        ...placement,
+      });
+      spriteIds.push(sprite.id);
+    }
+  }
+
+  return {
+    result: {
+      index: atlasIndex,
+      width: finalWidth || 1,
+      height: finalHeight || 1,
+      placements: resultPlacements,
+      spriteIds,
+    },
+    unpackedSprites,
+  };
+}
+
+/**
+ * Main packing function
+ * Supports multi-atlas mode
+ */
+export function packSprites(
+  sprites: PackerSprite[], 
+  config: TextureAtlasConfig,
+  enableMultiAtlas: boolean = false
+): PackerResult | null {
+  if (sprites.length === 0) {
+    return null;
+  }
+
+  const atlases: SinglePackerResult[] = [];
+  let remainingSprites = [...sprites];
+  let atlasIndex = 0;
+  
+  // Pack into atlases
+  while (remainingSprites.length > 0) {
+    const { result, unpackedSprites } = packSingleAtlas(remainingSprites, config, atlasIndex);
+    
+    // If nothing was packed, we have sprites that are too large
+    if (result.placements.length === 0) {
+      break;
+    }
+    
+    atlases.push(result);
+    
+    // If multi-atlas is disabled, stop after first atlas
+    if (!enableMultiAtlas) {
+      // Return with unpacked sprites info
+      return {
+        atlases,
+        packedCount: result.placements.length,
+        unpackedSprites,
+      };
+    }
+    
+    // Continue with remaining sprites
+    remainingSprites = unpackedSprites;
+    atlasIndex++;
+    
+    // Safety limit to prevent infinite loops
+    if (atlasIndex > 100) {
+      console.warn("Max atlas limit reached");
+      break;
+    }
+  }
+  
+  if (atlases.length === 0) {
+    return null;
+  }
+
+  const totalPacked = atlases.reduce((sum, a) => sum + a.placements.length, 0);
+  
+  return {
+    atlases,
+    packedCount: totalPacked,
+    unpackedSprites: remainingSprites,
+  };
+}
+
+/**
+ * Export to Cocos2d plist format
+ */
+export function exportToCocos2dPlist(
+  placements: PackerPlacement[],
+  width: number,
+  height: number,
+  imageFilename: string
+): string {
+  const escapeXml = (str: string): string => {
+    return str
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&apos;");
+  };
+
+  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
+  xml += '<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">\n';
+  xml += '<plist version="1.0">\n';
+  xml += '<dict>\n';
+  xml += '\t<key>frames</key>\n';
+  xml += '\t<dict>\n';
+
+  for (const p of placements) {
+    const w = p.rotated ? p.height : p.width;
+    const h = p.rotated ? p.width : p.height;
+    
+    xml += `\t\t<key>${escapeXml(p.name)}</key>\n`;
+    xml += '\t\t<dict>\n';
+    xml += '\t\t\t<key>frame</key>\n';
+    xml += `\t\t\t<string>{{${Math.round(p.x)},${Math.round(p.y)}},{${Math.round(w)},${Math.round(h)}}}</string>\n`;
+    xml += '\t\t\t<key>offset</key>\n';
+    xml += '\t\t\t<string>{0,0}</string>\n';
+    xml += '\t\t\t<key>rotated</key>\n';
+    xml += `\t\t\t<${p.rotated ? 'true' : 'false'}/>\n`;
+    xml += '\t\t\t<key>sourceColorRect</key>\n';
+    xml += `\t\t\t<string>{{0,0},{${Math.round(p.width)},${Math.round(p.height)}}}</string>\n`;
+    xml += '\t\t\t<key>sourceSize</key>\n';
+    xml += `\t\t\t<string>{${Math.round(p.width)},${Math.round(p.height)}}</string>\n`;
+    xml += '\t\t</dict>\n';
+  }
+
+  xml += '\t</dict>\n';
+  xml += '\t<key>metadata</key>\n';
+  xml += '\t<dict>\n';
+  xml += '\t\t<key>format</key>\n';
+  xml += '\t\t<integer>2</integer>\n';
+  xml += '\t\t<key>realTextureFileName</key>\n';
+  xml += `\t\t<string>${escapeXml(imageFilename)}</string>\n`;
+  xml += '\t\t<key>size</key>\n';
+  xml += `\t\t<string>{${width},${height}}</string>\n`;
+  xml += '\t\t<key>textureFileName</key>\n';
+  xml += `\t\t<string>${escapeXml(imageFilename)}</string>\n`;
+  xml += '\t</dict>\n';
+  xml += '</dict>\n';
+  xml += '</plist>\n';
+
+  return xml;
+}
+
+/**
+ * Export to Cocos Creator JSON format
+ */
+export function exportToCocosCreatorJson(
+  placements: PackerPlacement[],
+  width: number,
+  height: number,
+  imageFilename: string,
+  format: string
+): string {
+  const frames: Record<string, object> = {};
+
+  for (const p of placements) {
+    const w = p.rotated ? p.height : p.width;
+    const h = p.rotated ? p.width : p.height;
+    
+    frames[p.name] = {
+      frame: { x: Math.round(p.x), y: Math.round(p.y), w: Math.round(w), h: Math.round(h) },
+      rotated: p.rotated,
+      trimmed: false,
+      spriteSourceSize: { x: 0, y: 0, w: Math.round(p.width), h: Math.round(p.height) },
+      sourceSize: { w: Math.round(p.width), h: Math.round(p.height) },
+    };
+  }
+
+  return JSON.stringify(
+    {
+      meta: {
+        image: imageFilename,
+        size: { w: width, h: height },
+        format,
+      },
+      frames,
+    },
+    null,
+    2
+  );
+}
+
+/**
+ * Export to generic JSON format
+ */
+export function exportToGenericJson(
+  placements: PackerPlacement[],
+  width: number,
+  height: number,
+  imageFilename: string,
+  format: string
+): string {
+  return JSON.stringify(
+    {
+      image: imageFilename,
+      width,
+      height,
+      format,
+      frames: placements.map((p) => ({
+        filename: p.name,
+        x: Math.round(p.x),
+        y: Math.round(p.y),
+        width: Math.round(p.rotated ? p.height : p.width),
+        height: Math.round(p.rotated ? p.width : p.height),
+        rotated: p.rotated,
+      })),
+    },
+    null,
+    2
+  );
+}

src/lib/atlas-worker.ts

@@ -0,0 +1,419 @@
+/**
+ * Web Worker for Texture Atlas Packing
+ * Handles CPU-intensive packing calculations off the main thread
+ */
+
+import type { TextureAtlasConfig } from "@/types";
+
+// Re-implement packing logic in worker context (workers can't import from main bundle easily)
+
+interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface PackerSprite {
+  id: string;
+  name: string;
+  width: number;
+  height: number;
+}
+
+interface PackerPlacement {
+  id: string;
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotated: boolean;
+}
+
+interface PackerResult {
+  width: number;
+  height: number;
+  placements: PackerPlacement[];
+}
+
+// Worker message types
+interface WorkerInputMessage {
+  type: "pack";
+  sprites: PackerSprite[];
+  config: TextureAtlasConfig;
+}
+
+interface WorkerOutputMessage {
+  type: "result" | "progress" | "error";
+  result?: PackerResult;
+  progress?: number;
+  error?: string;
+}
+
+function nextPowerOfTwo(value: number): number {
+  return Math.pow(2, Math.ceil(Math.log2(value)));
+}
+
+function adjustSizeForPot(value: number, pot: boolean): number {
+  return pot ? nextPowerOfTwo(value) : value;
+}
+
+function sortSpritesBySize<T extends { width: number; height: number }>(sprites: T[]): T[] {
+  return [...sprites].sort((a, b) => {
+    const maxA = Math.max(a.width, a.height);
+    const maxB = Math.max(b.width, b.height);
+    if (maxA !== maxB) return maxB - maxA;
+    const areaA = a.width * a.height;
+    const areaB = b.width * b.height;
+    if (areaB !== areaA) return areaB - areaA;
+    return (b.width + b.height) - (a.width + a.height);
+  });
+}
+
+class MaxRectsPacker {
+  private usedRectangles: Rectangle[] = [];
+  private freeRectangles: Rectangle[] = [];
+  private allowRotation: boolean;
+
+  constructor(width: number, height: number, allowRotation: boolean) {
+    this.allowRotation = allowRotation;
+    this.freeRectangles.push({ x: 0, y: 0, width, height });
+  }
+
+  insert(width: number, height: number): { x: number; y: number; rotated: boolean } | null {
+    let bestNode = this.findPositionBestAreaFit(width, height);
+    let rotated = false;
+
+    if (this.allowRotation && width !== height) {
+      const rotatedNode = this.findPositionBestAreaFit(height, width);
+      if (!bestNode || (rotatedNode && rotatedNode.height * rotatedNode.width < bestNode.height * bestNode.width)) {
+        bestNode = rotatedNode;
+        rotated = true;
+        [width, height] = [height, width];
+      }
+    }
+
+    if (!bestNode) return null;
+
+    this.splitFreeRectangles(bestNode, width, height);
+    this.usedRectangles.push({ x: bestNode.x, y: bestNode.y, width, height });
+
+    return { x: bestNode.x, y: bestNode.y, rotated };
+  }
+
+  private findPositionBestAreaFit(width: number, height: number): Rectangle | null {
+    let bestNode: Rectangle | null = null;
+    let bestAreaFit = Number.MAX_VALUE;
+    let bestShortSideFit = Number.MAX_VALUE;
+
+    for (const rect of this.freeRectangles) {
+      const areaFit = rect.width * rect.height - width * height;
+      if (rect.width >= width && rect.height >= height) {
+        const leftoverHoriz = Math.abs(rect.width - width);
+        const leftoverVert = Math.abs(rect.height - height);
+        const shortSideFit = Math.min(leftoverHoriz, leftoverVert);
+        if (areaFit < bestAreaFit || (areaFit === bestAreaFit && shortSideFit < bestShortSideFit)) {
+          bestNode = { x: rect.x, y: rect.y, width, height };
+          bestShortSideFit = shortSideFit;
+          bestAreaFit = areaFit;
+        }
+      }
+    }
+    return bestNode;
+  }
+
+  private splitFreeRectangles(node: Rectangle, width: number, height: number): void {
+    for (let i = this.freeRectangles.length - 1; i >= 0; i--) {
+      const freeRect = this.freeRectangles[i];
+      if (this.splitFreeRectangle(freeRect, node, width, height)) {
+        this.freeRectangles.splice(i, 1);
+      }
+    }
+    this.freeRectangles = this.freeRectangles.filter(r => r.width > 0 && r.height > 0);
+    this.pruneFreeRectangles();
+  }
+
+  private splitFreeRectangle(freeRect: Rectangle, usedNode: Rectangle, width: number, height: number): boolean {
+    if (freeRect.x >= usedNode.x + width || freeRect.x + freeRect.width <= usedNode.x ||
+        freeRect.y >= usedNode.y + height || freeRect.y + freeRect.height <= usedNode.y) {
+      return false;
+    }
+
+    if (freeRect.x < usedNode.x) {
+      this.freeRectangles.push({ x: freeRect.x, y: freeRect.y, width: usedNode.x - freeRect.x, height: freeRect.height });
+    }
+    if (freeRect.x + freeRect.width > usedNode.x + width) {
+      this.freeRectangles.push({ x: usedNode.x + width, y: freeRect.y, width: freeRect.x + freeRect.width - (usedNode.x + width), height: freeRect.height });
+    }
+    if (freeRect.y < usedNode.y) {
+      this.freeRectangles.push({ x: freeRect.x, y: freeRect.y, width: freeRect.width, height: usedNode.y - freeRect.y });
+    }
+    if (freeRect.y + freeRect.height > usedNode.y + height) {
+      this.freeRectangles.push({ x: freeRect.x, y: usedNode.y + height, width: freeRect.width, height: freeRect.y + freeRect.height - (usedNode.y + height) });
+    }
+    return true;
+  }
+
+  private pruneFreeRectangles(): void {
+    for (let i = 0; i < this.freeRectangles.length; i++) {
+      for (let j = i + 1; j < this.freeRectangles.length; j++) {
+        if (this.isContainedIn(this.freeRectangles[i], this.freeRectangles[j])) {
+          this.freeRectangles.splice(i, 1);
+          i--;
+          break;
+        }
+        if (this.isContainedIn(this.freeRectangles[j], this.freeRectangles[i])) {
+          this.freeRectangles.splice(j, 1);
+          j--;
+        }
+      }
+    }
+  }
+
+  private isContainedIn(a: Rectangle, b: Rectangle): boolean {
+    return a.x >= b.x && a.y >= b.y && a.x + a.width <= b.x + b.width && a.y + a.height <= b.y + b.height;
+  }
+}
+
+class ShelfPacker {
+  private shelves: { y: number; currentX: number; height: number }[] = [];
+  private currentY = 0;
+  private allowRotation: boolean;
+  private binWidth: number;
+  private binHeight: number;
+  private padding: number;
+
+  constructor(binWidth: number, binHeight: number, allowRotation: boolean, padding: number) {
+    this.binWidth = binWidth;
+    this.binHeight = binHeight;
+    this.allowRotation = allowRotation;
+    this.padding = padding;
+  }
+
+  insert(width: number, height: number): { x: number; y: number; rotated: boolean } | null {
+    const paddedWidth = width + this.padding;
+    const paddedHeight = height + this.padding;
+
+    for (const shelf of this.shelves) {
+      if (this.allowRotation && width !== height) {
+        if (shelf.currentX + height + this.padding <= this.binWidth && shelf.y + width <= this.binHeight) {
+          const result = { x: shelf.currentX, y: shelf.y, rotated: true };
+          shelf.currentX += height + this.padding;
+          shelf.height = Math.max(shelf.height, width + this.padding);
+          return result;
+        }
+      }
+      if (shelf.currentX + paddedWidth <= this.binWidth && shelf.y + height <= this.binHeight) {
+        const result = { x: shelf.currentX, y: shelf.y, rotated: false };
+        shelf.currentX += paddedWidth;
+        shelf.height = Math.max(shelf.height, paddedHeight);
+        return result;
+      }
+    }
+
+    const newShelfY = this.currentY;
+    if (newShelfY + paddedHeight > this.binHeight) return null;
+
+    const newShelf = { y: newShelfY, currentX: 0, height: paddedHeight };
+
+    if (this.allowRotation && width !== height) {
+      if (newShelf.currentX + height + this.padding <= this.binWidth) {
+        newShelf.currentX = height + this.padding;
+        newShelf.height = Math.max(newShelf.height, width + this.padding);
+        this.shelves.push(newShelf);
+        this.currentY += newShelf.height;
+        return { x: 0, y: newShelfY, rotated: true };
+      }
+    }
+
+    if (newShelf.currentX + paddedWidth <= this.binWidth) {
+      newShelf.currentX = paddedWidth;
+      this.shelves.push(newShelf);
+      this.currentY += newShelf.height;
+      return { x: 0, y: newShelfY, rotated: false };
+    }
+
+    return null;
+  }
+}
+
+function packWithMaxRects(sprites: PackerSprite[], config: TextureAtlasConfig, postProgress: (p: number) => void): Map<string, { x: number; y: number; width: number; height: number; rotated: boolean }> | null {
+  const padding = config.padding;
+  const packer = new MaxRectsPacker(config.maxWidth, config.maxHeight, config.allowRotation);
+  const placements = new Map<string, { x: number; y: number; width: number; height: number; rotated: boolean }>();
+  const sorted = sortSpritesBySize(sprites);
+  
+  for (let i = 0; i < sorted.length; i++) {
+    const sprite = sorted[i];
+    const paddedWidth = sprite.width + padding * 2;
+    const paddedHeight = sprite.height + padding * 2;
+    const position = packer.insert(paddedWidth, paddedHeight);
+    
+    if (!position) return null;
+    
+    placements.set(sprite.id, {
+      x: position.x + padding,
+      y: position.y + padding,
+      width: sprite.width,
+      height: sprite.height,
+      rotated: position.rotated,
+    });
+    
+    postProgress(((i + 1) / sorted.length) * 100);
+  }
+  
+  return placements;
+}
+
+function packWithShelf(sprites: PackerSprite[], config: TextureAtlasConfig, postProgress: (p: number) => void): Map<string, { x: number; y: number; width: number; height: number; rotated: boolean }> | null {
+  const padding = config.padding;
+  const packer = new ShelfPacker(config.maxWidth, config.maxHeight, config.allowRotation, padding);
+  const placements = new Map<string, { x: number; y: number; width: number; height: number; rotated: boolean }>();
+  const sorted = sortSpritesBySize(sprites);
+  
+  for (let i = 0; i < sorted.length; i++) {
+    const sprite = sorted[i];
+    const position = packer.insert(sprite.width, sprite.height);
+    
+    if (!position) return null;
+    
+    placements.set(sprite.id, {
+      x: position.x + padding,
+      y: position.y + padding,
+      width: sprite.width,
+      height: sprite.height,
+      rotated: position.rotated,
+    });
+    
+    postProgress(((i + 1) / sorted.length) * 100);
+  }
+  
+  return placements;
+}
+
+function packSprites(sprites: PackerSprite[], config: TextureAtlasConfig, postProgress: (p: number) => void): PackerResult | null {
+  if (sprites.length === 0) return null;
+
+  const padding = config.padding;
+  const maxSpriteWidth = Math.max(...sprites.map(s => s.width));
+  const maxSpriteHeight = Math.max(...sprites.map(s => s.height));
+  const totalArea = sprites.reduce((sum, s) => sum + (s.width + padding * 2) * (s.height + padding * 2), 0);
+  const minSide = Math.ceil(Math.sqrt(totalArea / 0.85));
+  const estimatedWidth = Math.max(maxSpriteWidth + padding * 2, minSide);
+  const estimatedHeight = Math.max(maxSpriteHeight + padding * 2, minSide);
+
+  const sizeAttempts: { w: number; h: number }[] = [];
+
+  if (config.pot) {
+    const potSizes = [64, 128, 256, 512, 1024, 2048, 4096].filter(s => s <= config.maxWidth || s <= config.maxHeight);
+    for (const w of potSizes) {
+      for (const h of potSizes) {
+        if (w <= config.maxWidth && h <= config.maxHeight && w >= maxSpriteWidth + padding * 2 && h >= maxSpriteHeight + padding * 2) {
+          sizeAttempts.push({ w, h });
+        }
+      }
+    }
+    sizeAttempts.sort((a, b) => a.w * a.h - b.w * b.h);
+  } else {
+    sizeAttempts.push(
+      { w: estimatedWidth, h: estimatedHeight },
+      { w: estimatedWidth * 1.5, h: estimatedHeight },
+      { w: estimatedWidth, h: estimatedHeight * 1.5 },
+      { w: estimatedWidth * 1.5, h: estimatedHeight * 1.5 },
+      { w: estimatedWidth * 2, h: estimatedHeight },
+      { w: estimatedWidth, h: estimatedHeight * 2 },
+      { w: estimatedWidth * 2, h: estimatedHeight * 2 },
+      { w: config.maxWidth, h: config.maxHeight }
+    );
+  }
+
+  const uniqueAttempts = sizeAttempts.filter((attempt, index, self) => {
+    const w = Math.min(Math.ceil(attempt.w), config.maxWidth);
+    const h = Math.min(Math.ceil(attempt.h), config.maxHeight);
+    return self.findIndex(a => Math.min(Math.ceil(a.w), config.maxWidth) === w && Math.min(Math.ceil(a.h), config.maxHeight) === h) === index;
+  });
+
+  for (const attempt of uniqueAttempts) {
+    const attemptWidth = Math.min(config.pot ? adjustSizeForPot(Math.ceil(attempt.w), true) : Math.ceil(attempt.w), config.maxWidth);
+    const attemptHeight = Math.min(config.pot ? adjustSizeForPot(Math.ceil(attempt.h), true) : Math.ceil(attempt.h), config.maxHeight);
+
+    if (attemptWidth > config.maxWidth || attemptHeight > config.maxHeight) continue;
+
+    const testConfig = { ...config, maxWidth: attemptWidth, maxHeight: attemptHeight };
+    let placements: Map<string, { x: number; y: number; width: number; height: number; rotated: boolean }> | null;
+
+    if (config.algorithm === "MaxRects") {
+      placements = packWithMaxRects(sprites, testConfig, postProgress);
+    } else {
+      placements = packWithShelf(sprites, testConfig, postProgress);
+    }
+
+    if (placements) {
+      let maxX = 0, maxY = 0;
+      for (const p of placements.values()) {
+        const effectiveWidth = p.rotated ? p.height : p.width;
+        const effectiveHeight = p.rotated ? p.width : p.height;
+        maxX = Math.max(maxX, p.x + effectiveWidth + padding);
+        maxY = Math.max(maxY, p.y + effectiveHeight + padding);
+      }
+
+      // Calculate the minimum required dimensions based on actual content
+      let finalWidth: number;
+      let finalHeight: number;
+      
+      if (config.pot) {
+        // Find smallest POT size that fits the actual content
+        finalWidth = adjustSizeForPot(Math.ceil(maxX), true);
+        finalHeight = adjustSizeForPot(Math.ceil(maxY), true);
+        // Ensure we don't exceed max limits
+        finalWidth = Math.min(finalWidth, config.maxWidth);
+        finalHeight = Math.min(finalHeight, config.maxHeight);
+      } else {
+        // For non-POT, use exact dimensions needed
+        finalWidth = Math.ceil(maxX);
+        finalHeight = Math.ceil(maxY);
+        // Ensure we don't exceed max limits
+        finalWidth = Math.min(finalWidth, config.maxWidth);
+        finalHeight = Math.min(finalHeight, config.maxHeight);
+      }
+
+      const resultPlacements: PackerPlacement[] = [];
+      for (const sprite of sprites) {
+        const placement = placements.get(sprite.id);
+        if (placement) {
+          resultPlacements.push({ id: sprite.id, name: sprite.name, ...placement });
+        }
+      }
+
+      return { width: finalWidth, height: finalHeight, placements: resultPlacements };
+    }
+  }
+
+  return null;
+}
+
+// Worker message handler
+self.onmessage = (event: MessageEvent<WorkerInputMessage>) => {
+  const { type, sprites, config } = event.data;
+
+  if (type === "pack") {
+    try {
+      const postProgress = (progress: number) => {
+        self.postMessage({ type: "progress", progress } as WorkerOutputMessage);
+      };
+
+      const result = packSprites(sprites, config, postProgress);
+
+      if (result) {
+        self.postMessage({ type: "result", result } as WorkerOutputMessage);
+      } else {
+        self.postMessage({ type: "error", error: "Failed to pack all sprites. Try increasing max size or enabling rotation." } as WorkerOutputMessage);
+      }
+    } catch (error) {
+      self.postMessage({ type: "error", error: error instanceof Error ? error.message : "Unknown error" } as WorkerOutputMessage);
+    }
+  }
+};
+
+export {};

src/lib/file-storage.ts

@@ -0,0 +1,305 @@
+import { promises as fs } from "fs";
+import path from "path";
+import { randomUUID } from "crypto";
+
+/**
+ * File storage service for handling temporary files
+ * Files are automatically cleaned up after a specified TTL
+ */
+
+const UPLOAD_DIR = process.env.TEMP_DIR || path.join(process.cwd(), ".temp", "uploads");
+const DOWNLOAD_DIR = process.env.TEMP_DIR || path.join(process.cwd(), ".temp", "downloads");
+const FILE_TTL = 60 * 60 * 1000; // 1 hour in milliseconds
+
+// Allowed MIME types for image upload
+const ALLOWED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/webp",
+  "image/gif",
+  "image/bmp",
+  "image/tiff",
+] as const;
+
+// Maximum file size (50MB)
+const MAX_FILE_SIZE = 50 * 1024 * 1024;
+
+// Track cleanup timeout
+const cleanupTimeouts = new Map<string, NodeJS.Timeout>();
+
+/**
+ * Initialize temporary directories
+ */
+export async function initFileStorage(): Promise<void> {
+  try {
+    await fs.mkdir(UPLOAD_DIR, { recursive: true });
+    await fs.mkdir(DOWNLOAD_DIR, { recursive: true });
+  } catch (error) {
+    console.error("Failed to initialize file storage:", error);
+    throw new Error("File storage initialization failed");
+  }
+}
+
+/**
+ * Validate image file type and size
+ */
+export function validateImageFile(
+  file: File | { name: string; size: number; type: string }
+): { valid: boolean; error?: string } {
+  // Check file size
+  if (file.size > MAX_FILE_SIZE) {
+    return {
+      valid: false,
+      error: `File size exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit`,
+    };
+  }
+
+  // Check file size (minimum 100 bytes to avoid corrupt files)
+  if (file.size < 100) {
+    return {
+      valid: false,
+      error: "File is too small or corrupt",
+    };
+  }
+
+  // Check MIME type
+  if (!file.type || !ALLOWED_IMAGE_TYPES.includes(file.type as typeof ALLOWED_IMAGE_TYPES[number])) {
+    return {
+      valid: false,
+      error: `Invalid file type. Allowed: ${ALLOWED_IMAGE_TYPES.join(", ")}`,
+    };
+  }
+
+  // Check file extension matches MIME type
+  const ext = getFileExtension(file.name).toLowerCase();
+  const validExtensions = ["jpg", "jpeg", "png", "webp", "gif", "bmp", "tif", "tiff"];
+
+  if (!validExtensions.includes(ext)) {
+    return {
+      valid: false,
+      error: `Invalid file extension. Allowed: ${validExtensions.join(", ")}`,
+    };
+  }
+
+  return { valid: true };
+}
+
+/**
+ * Get file extension from filename
+ */
+function getFileExtension(filename: string): string {
+  const parts = filename.split(".");
+  return parts.length > 1 ? parts[parts.length - 1] : "";
+}
+
+/**
+ * Sanitize filename to prevent path traversal
+ */
+export function sanitizeFilename(filename: string): string {
+  // Remove any directory separators and special characters
+  const sanitized = filename
+    .replace(/[\\/]/g, "") // Remove path separators
+    .replace(/\.{2,}/g, ".") // Remove double dots
+    .replace(/[^a-zA-Z0-9._-]/g, "_") // Replace special chars
+    .substring(0, 255); // Limit length
+
+  return sanitized || "file";
+}
+
+/**
+ * Save uploaded file to temp storage
+ */
+export async function saveUploadedFile(
+  file: File | { name: string; type: string; arrayBuffer: () => Promise<ArrayBuffer> }
+): Promise<{ fileId: string; filePath: string; originalName: string; size: number; type: string }> {
+  await initFileStorage();
+
+  const fileId = randomUUID();
+  const sanitized = sanitizeFilename(file.name);
+  const ext = getFileExtension(sanitized);
+  const filename = `${fileId}.${ext}`;
+  const filePath = path.join(UPLOAD_DIR, filename);
+
+  // Save file
+  const buffer = Buffer.from(await file.arrayBuffer());
+  await fs.writeFile(filePath, buffer);
+
+  // Schedule cleanup
+  scheduleCleanup(fileId, filePath);
+
+  return {
+    fileId,
+    filePath,
+    originalName: file.name,
+    size: buffer.length,
+    type: file.type,
+  };
+}
+
+/**
+ * Save processed file to download directory
+ */
+export async function saveProcessedFile(
+  _fileId: string,
+  buffer: Buffer,
+  format: string,
+  originalName: string
+): Promise<{ fileUrl: string; filename: string; size: number }> {
+  await initFileStorage();
+
+  const downloadId = randomUUID();
+  const sanitized = sanitizeFilename(originalName);
+  const nameWithoutExt = sanitized.replace(/\.[^.]+$/, "");
+  const filename = `${nameWithoutExt}_compressed.${format}`;
+  const filePath = path.join(DOWNLOAD_DIR, `${downloadId}_${filename}`);
+
+  await fs.writeFile(filePath, buffer);
+
+  // Schedule cleanup
+  scheduleCleanup(downloadId, filePath);
+
+  return {
+    fileUrl: `/api/download/${downloadId}`,
+    filename,
+    size: buffer.length,
+  };
+}
+
+/**
+ * Get file from upload directory
+ */
+export async function getUploadedFile(fileId: string): Promise<Buffer | null> {
+  await initFileStorage();
+
+  try {
+    const files = await fs.readdir(UPLOAD_DIR);
+    const file = files.find((f) => f.startsWith(`${fileId}.`));
+
+    if (!file) {
+      return null;
+    }
+
+    const filePath = path.join(UPLOAD_DIR, file);
+    return await fs.readFile(filePath);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get processed file for download
+ */
+export async function getProcessedFile(downloadId: string): Promise<
+  | { buffer: Buffer; filename: string; contentType: string }[]
+  | null
+> {
+  await initFileStorage();
+
+  try {
+    const files = await fs.readdir(DOWNLOAD_DIR);
+    const file = files.find((f) => f.startsWith(`${downloadId}_`));
+
+    if (!file) {
+      return null;
+    }
+
+    const filePath = path.join(DOWNLOAD_DIR, file);
+    const buffer = await fs.readFile(filePath);
+
+    // Extract filename
+    const filename = file.substring(downloadId.length + 1);
+
+    // Determine content type
+    const ext = getFileExtension(filename);
+    const contentTypes: Record<string, string> = {
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      png: "image/png",
+      webp: "image/webp",
+      gif: "image/gif",
+      bmp: "image/bmp",
+      tif: "image/tiff",
+      tiff: "image/tiff",
+    };
+
+    return [
+      {
+        buffer,
+        filename,
+        contentType: contentTypes[ext] || "application/octet-stream",
+      },
+    ];
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Schedule file cleanup
+ */
+function scheduleCleanup(fileId: string, filePath: string): void {
+  // Clear existing timeout if any
+  const existing = cleanupTimeouts.get(fileId);
+  if (existing) {
+    clearTimeout(existing);
+  }
+
+  // Schedule new cleanup
+  const timeout = setTimeout(async () => {
+    try {
+      await fs.unlink(filePath);
+      cleanupTimeouts.delete(fileId);
+    } catch (error) {
+      console.error(`Failed to cleanup file ${fileId}:`, error);
+    }
+  }, FILE_TTL);
+
+  cleanupTimeouts.set(fileId, timeout);
+}
+
+/**
+ * Manually cleanup a file
+ */
+export async function cleanupFile(fileId: string): Promise<void> {
+  const timeout = cleanupTimeouts.get(fileId);
+  if (timeout) {
+    clearTimeout(timeout);
+    cleanupTimeouts.delete(fileId);
+  }
+
+  // Try to delete from both directories
+  try {
+    const files = await fs.readdir(UPLOAD_DIR);
+    const file = files.find((f) => f.startsWith(`${fileId}.`));
+    if (file) {
+      await fs.unlink(path.join(UPLOAD_DIR, file));
+    }
+  } catch {
+    // Ignore
+  }
+
+  try {
+    const files = await fs.readdir(DOWNLOAD_DIR);
+    const file = files.find((f) => f.startsWith(`${fileId}_`));
+    if (file) {
+      await fs.unlink(path.join(DOWNLOAD_DIR, file));
+    }
+  } catch {
+    // Ignore
+  }
+}
+
+/**
+ * Get allowed image types
+ */
+export function getAllowedImageTypes(): readonly string[] {
+  return ALLOWED_IMAGE_TYPES;
+}
+
+/**
+ * Get maximum file size
+ */
+export function getMaxFileSize(): number {
+  return MAX_FILE_SIZE;
+}

src/lib/i18n.ts

@@ -0,0 +1,124 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import { useState, useEffect } from "react";
+import en from "@/locales/en.json";
+import zh from "@/locales/zh.json";
+
+export type Locale = "en" | "zh";
+export type LocaleMessages = typeof en;
+
+export const locales: Record<Locale, { name: string }> = {
+  en: { name: "English" },
+  zh: { name: "中文" },
+};
+
+const messages: Record<Locale, LocaleMessages> = { en, zh };
+
+interface I18nState {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+  t: (key: string, params?: Record<string, string | number>) => string;
+}
+
+function getNestedValue(obj: Record<string, unknown>, path: string): string | unknown {
+  return path.split(".").reduce((acc: unknown, part) => {
+    if (acc && typeof acc === "object" && part in (acc as Record<string, unknown>)) {
+      return (acc as Record<string, unknown>)[part];
+    }
+    return undefined;
+  }, obj) || path;
+}
+
+function interpolate(template: string, params: Record<string, string | number | unknown> = {}): string {
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    const value = params[key];
+    if (value === undefined || value === null) return `{{${key}}}`;
+    return String(value);
+  });
+}
+
+export const useI18nStore = create<I18nState>()(
+  persist(
+    (set, get) => ({
+      locale: "en", // Default to en for SSR/Hydration
+      setLocale: (locale) => set({ locale }),
+
+      t: (key, params) => {
+        const { locale } = get();
+        const value = getNestedValue(messages[locale], key);
+        if (typeof value !== "string") return value as string;
+        if (!params || Object.keys(params).length === 0) return value;
+        return interpolate(value, params);
+      },
+    }),
+    {
+      name: "locale-storage",
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+);
+
+// Convenience hook
+export function useTranslation() {
+  const { locale, setLocale, t } = useI18nStore();
+
+  const plural = (key: string, count: number) => {
+    const suffix = count === 1 ? "_one" : "_other";
+    return t(`${key}${suffix}`, { count });
+  };
+
+  return {
+    locale,
+    setLocale,
+    t,
+    plural,
+    locales,
+  };
+}
+
+/**
+ * SSR-safe translation hook that prevents hydration mismatches.
+ * Use this in client components that are rendered on the server.
+ * Returns a stable translation during SSR and switches to client locale after hydration.
+ */
+export function useSafeTranslation() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const { locale, setLocale, t, plural, locales } = useTranslation();
+
+  // Use English during SSR, client locale after hydration
+  const safeT: typeof t = (key, params) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
+  };
+
+  const safePlural: typeof plural = (key, count) => {
+    if (!mounted) {
+      const suffix = count === 1 ? "_one" : "_other";
+      return getServerTranslations("en").t(`${key}${suffix}`, { count });
+    }
+    return plural(key, count);
+  };
+
+  return {
+    locale,
+    setLocale,
+    t: safeT,
+    plural: safePlural,
+    locales,
+    mounted, // Expose mounted state for conditional rendering if needed
+  };
+}
+
+// Helper for SSR
+export function getServerTranslations(locale: Locale = "en") {
+  return {
+    locale,
+    t: (key: string, params?: Record<string, string | number>) => {
+      const value = getNestedValue(messages[locale], key);
+      if (typeof value !== "string") return value as string;
+      if (!params || Object.keys(params).length === 0) return value;
+      return interpolate(value, params);
+    },
+  };
+}

src/lib/image-processor.ts

@@ -0,0 +1,624 @@
+import sharp from "sharp";
+import type { ImageCompressConfig } from "@/types";
+
+/**
+ * World-class Image Compression Engine
+ * 
+ * 实现业界领先的图片压缩算法，核心策略：
+ * 1. 智能格式检测与自适应压缩
+ * 2. 多轮压缩迭代，确保最优结果
+ * 3. 压缩后不大于原图保证
+ * 4. 自动元数据剥离
+ * 5. 智能调色板降级 (PNG)
+ * 6. 基于内容的压缩策略
+ */
+
+export interface ProcessedImageResult {
+  buffer: Buffer;
+  format: string;
+  width: number;
+  height: number;
+  originalSize: number;
+  compressedSize: number;
+  compressionRatio: number;
+}
+
+export interface ImageMetadata {
+  format: string;
+  width: number;
+  height: number;
+  size: number;
+  hasAlpha: boolean;
+  isAnimated: boolean;
+  colorSpace?: string;
+  channels?: number;
+  depth?: string;
+}
+
+// Supported output formats for compression
+const SUPPORTED_OUTPUT_FORMATS = ["jpeg", "jpg", "png", "webp", "avif", "gif", "tiff", "tif"] as const;
+type SupportedFormat = (typeof SUPPORTED_OUTPUT_FORMATS)[number];
+
+/**
+ * Get detailed image metadata
+ */
+export async function getImageMetadata(buffer: Buffer): Promise<ImageMetadata> {
+  const metadata = await sharp(buffer).metadata();
+
+  return {
+    format: metadata.format || "unknown",
+    width: metadata.width || 0,
+    height: metadata.height || 0,
+    size: buffer.length,
+    hasAlpha: metadata.hasAlpha || false,
+    isAnimated: (metadata.pages || 1) > 1,
+    colorSpace: metadata.space,
+    channels: metadata.channels,
+    depth: metadata.depth,
+  };
+}
+
+/**
+ * Validate image buffer using Sharp
+ */
+export async function validateImageBuffer(buffer: Buffer): Promise<boolean> {
+  try {
+    const metadata = await sharp(buffer).metadata();
+    return (
+      metadata.format !== undefined &&
+      metadata.width !== undefined &&
+      metadata.width > 0 &&
+      metadata.height !== undefined &&
+      metadata.height > 0
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if format is supported for output
+ */
+function isSupportedFormat(format: string): format is SupportedFormat {
+  return SUPPORTED_OUTPUT_FORMATS.includes(format as SupportedFormat);
+}
+
+/**
+ * 分析图片特征，选择最佳压缩策略
+ */
+async function analyzeImageCharacteristics(buffer: Buffer): Promise<{
+  isPhotographic: boolean;
+  hasGradients: boolean;
+  isSimpleGraphic: boolean;
+  uniqueColors: number;
+  dominantColorCount: number;
+}> {
+  const image = sharp(buffer);
+  const stats = await image.stats();
+  const metadata = await image.metadata();
+
+  // 分析颜色分布
+  const channels = stats.channels;
+  let totalStdDev = 0;
+  let colorVariance = 0;
+
+  channels.forEach((channel) => {
+    totalStdDev += channel.stdev;
+    colorVariance += Math.abs(channel.max - channel.min);
+  });
+
+  const avgStdDev = totalStdDev / channels.length;
+  const avgVariance = colorVariance / channels.length;
+
+  // 摄影图片通常有较高的标准差和颜色变化
+  const isPhotographic = avgStdDev > 40 && avgVariance > 150;
+
+  // 简单图形通常颜色变化小
+  const isSimpleGraphic = avgStdDev < 30 && avgVariance < 100;
+
+  // 渐变检测：中等标准差但低对比度
+  const hasGradients = avgStdDev > 20 && avgStdDev < 60;
+
+  // 估算唯一颜色数（基于统计）
+  const estimatedUniqueColors = Math.min(
+    Math.pow(2, (metadata.depth === "uchar" ? 8 : 16) * (metadata.channels || 3)),
+    Math.round(avgVariance * avgStdDev * 10)
+  );
+
+  return {
+    isPhotographic,
+    hasGradients,
+    isSimpleGraphic,
+    uniqueColors: estimatedUniqueColors,
+    dominantColorCount: channels.length,
+  };
+}
+
+/**
+ * 选择最佳输出格式
+ */
+async function selectOptimalFormat(
+  buffer: Buffer,
+  requestedFormat: string,
+  metadata: ImageMetadata
+): Promise<string> {
+  if (requestedFormat !== "original" && requestedFormat !== "auto") {
+    return requestedFormat;
+  }
+
+  // 保留动画格式
+  if (metadata.isAnimated) {
+    if (metadata.format === "gif") return "gif";
+    if (metadata.format === "webp") return "webp";
+  }
+
+  // 有透明通道
+  if (metadata.hasAlpha) {
+    // WebP 支持透明且压缩率更好
+    return "webp";
+  }
+
+  // 照片类用 JPEG/WebP
+  const characteristics = await analyzeImageCharacteristics(buffer);
+  if (characteristics.isPhotographic) {
+    return "webp"; // WebP 在照片上表现最好
+  }
+
+  // 简单图形用 PNG
+  if (characteristics.isSimpleGraphic && characteristics.uniqueColors < 256) {
+    return "png";
+  }
+
+  // 默认返回原格式或 WebP
+  return metadata.format === "png" ? "png" : "webp";
+}
+
+/**
+ * 核心压缩函数 - 业界最佳实践实现
+ */
+export async function compressImage(
+  buffer: Buffer,
+  config: ImageCompressConfig
+): Promise<ProcessedImageResult> {
+  // Validate input buffer
+  const isValid = await validateImageBuffer(buffer);
+  if (!isValid) {
+    throw new Error("Invalid image data");
+  }
+
+  const originalSize = buffer.length;
+  const originalMetadata = await getImageMetadata(buffer);
+
+  // 选择最佳输出格式
+  let outputFormat = await selectOptimalFormat(
+    buffer,
+    config.format,
+    originalMetadata
+  );
+
+  // BMP 不支持输出，转为合适格式
+  if (outputFormat === "bmp") {
+    outputFormat = originalMetadata.hasAlpha ? "png" : "jpeg";
+  }
+
+  if (!isSupportedFormat(outputFormat)) {
+    outputFormat = "jpeg";
+  }
+
+  // 尝试多种压缩策略，选择最优结果
+  const compressionResults = await Promise.all([
+    compressWithStrategy(buffer, config, outputFormat, "aggressive"),
+    compressWithStrategy(buffer, config, outputFormat, "balanced"),
+    compressWithStrategy(buffer, config, outputFormat, "quality"),
+  ]);
+
+  // 选择最小且不大于原图的结果
+  let bestResult = compressionResults.reduce((best, current) => {
+    // 优先选择比原图小的
+    if (current.length < originalSize && best.length >= originalSize) {
+      return current;
+    }
+    if (current.length >= originalSize && best.length < originalSize) {
+      return best;
+    }
+    // 都比原图小或都比原图大时，选择最小的
+    return current.length < best.length ? current : best;
+  });
+
+  // 如果所有策略都导致变大，返回原图
+  if (bestResult.length >= originalSize) {
+    // 尝试仅剥离元数据
+    const strippedBuffer = await stripMetadataOnly(buffer, originalMetadata.format);
+    if (strippedBuffer.length < originalSize) {
+      bestResult = strippedBuffer;
+      outputFormat = originalMetadata.format;
+    } else {
+      // 返回原图
+      return {
+        buffer,
+        format: originalMetadata.format,
+        width: originalMetadata.width,
+        height: originalMetadata.height,
+        originalSize,
+        compressedSize: originalSize,
+        compressionRatio: 0,
+      };
+    }
+  }
+
+  // 获取输出元数据
+  const outputMetadata = await sharp(bestResult).metadata();
+
+  const compressionRatio = Math.round(
+    ((originalSize - bestResult.length) / originalSize) * 100
+  );
+
+  return {
+    buffer: bestResult,
+    format: outputFormat,
+    width: outputMetadata.width || originalMetadata.width,
+    height: outputMetadata.height || originalMetadata.height,
+    originalSize,
+    compressedSize: bestResult.length,
+    compressionRatio: Math.max(0, compressionRatio),
+  };
+}
+
+/**
+ * 仅剥离元数据，不重新编码
+ */
+async function stripMetadataOnly(buffer: Buffer, format: string): Promise<Buffer> {
+  try {
+    const pipeline = sharp(buffer).rotate(); // rotate() 会移除 EXIF
+
+    switch (format) {
+      case "jpeg":
+      case "jpg":
+        return await pipeline.jpeg({ quality: 100 }).toBuffer();
+      case "png":
+        return await pipeline.png({ compressionLevel: 9 }).toBuffer();
+      case "webp":
+        return await pipeline.webp({ quality: 100, lossless: true }).toBuffer();
+      default:
+        return buffer;
+    }
+  } catch {
+    return buffer;
+  }
+}
+
+/**
+ * 使用特定策略进行压缩
+ */
+async function compressWithStrategy(
+  buffer: Buffer,
+  config: ImageCompressConfig,
+  outputFormat: string,
+  strategy: "aggressive" | "balanced" | "quality"
+): Promise<Buffer> {
+  const metadata = await getImageMetadata(buffer);
+  const characteristics = await analyzeImageCharacteristics(buffer);
+
+  let pipeline = sharp(buffer, {
+    limitInputPixels: 268402689,
+    unlimited: false,
+  });
+
+  // 移除所有元数据以减小体积
+  pipeline = pipeline.rotate(); // 自动旋转并移除 orientation
+
+  // 应用尺寸调整
+  if (config.resize) {
+    const { width, height, fit } = config.resize;
+    if (width || height) {
+      pipeline = pipeline.resize(width || null, height || null, {
+        fit: fit === "contain" ? "inside" : fit === "cover" ? "cover" : "fill",
+        withoutEnlargement: fit !== "fill",
+        kernel: "lanczos3", // 高质量缩放算法
+      });
+    }
+  }
+
+  // 根据策略调整质量
+  const qualityMultiplier = {
+    aggressive: 0.7,
+    balanced: 0.85,
+    quality: 1.0,
+  }[strategy];
+
+  const adjustedQuality = Math.round(config.quality * qualityMultiplier);
+
+  // 应用格式特定的压缩
+  switch (outputFormat) {
+    case "jpeg":
+    case "jpg":
+      pipeline = pipeline.jpeg(getJpegOptions(adjustedQuality, strategy, characteristics));
+      break;
+
+    case "png":
+      pipeline = pipeline.png(getPngOptions(adjustedQuality, strategy, characteristics, metadata));
+      break;
+
+    case "webp":
+      pipeline = pipeline.webp(getWebpOptions(adjustedQuality, strategy, characteristics, metadata));
+      break;
+
+    case "avif":
+      pipeline = pipeline.avif(getAvifOptions(adjustedQuality, strategy));
+      break;
+
+    case "gif":
+      pipeline = pipeline.gif(getGifOptions(strategy));
+      break;
+
+    case "tiff":
+    case "tif":
+      pipeline = pipeline.tiff(getTiffOptions(adjustedQuality, strategy));
+      break;
+
+    default:
+      pipeline = pipeline.jpeg(getJpegOptions(adjustedQuality, strategy, characteristics));
+  }
+
+  return await pipeline.toBuffer();
+}
+
+/**
+ * JPEG 压缩选项 - 使用 MozJPEG 最佳实践
+ */
+function getJpegOptions(
+  quality: number,
+  strategy: string,
+  characteristics: Awaited<ReturnType<typeof analyzeImageCharacteristics>>
+): sharp.JpegOptions {
+  const baseOptions: sharp.JpegOptions = {
+    quality: Math.max(1, Math.min(100, quality)),
+    mozjpeg: true, // MozJPEG 提供更好的压缩率
+    progressive: true, // 渐进式加载，提升用户体验
+    optimiseCoding: true, // 优化哈夫曼表
+    optimiseScans: true, // 优化扫描顺序
+    trellisQuantisation: true, // Trellis 量化，提升质量
+    overshootDeringing: true, // 减少振铃效应
+    quantisationTable: characteristics.isPhotographic ? 3 : 2, // 照片用更高质量表
+  };
+
+  if (strategy === "aggressive") {
+    return {
+      ...baseOptions,
+      quality: Math.max(1, quality - 10),
+      quantisationTable: 0, // 最激进的量化表
+    };
+  }
+
+  return baseOptions;
+}
+
+/**
+ * PNG 压缩选项 - 智能无损/有损选择
+ */
+function getPngOptions(
+  quality: number,
+  strategy: string,
+  characteristics: Awaited<ReturnType<typeof analyzeImageCharacteristics>>,
+  metadata: ImageMetadata
+): sharp.PngOptions {
+  // PNG 是无损格式，quality 映射到 compressionLevel (0-9)
+  // 更高的 compressionLevel = 更慢但更小的文件
+  const compressionLevel = Math.min(9, Math.max(0, Math.floor((100 - quality) / 11)));
+
+  // 智能调色板决策
+  // 简单图形或低质量设置时使用调色板可大幅减小体积
+  const usePalette = 
+    strategy === "aggressive" ||
+    (characteristics.isSimpleGraphic && quality < 90) ||
+    (!metadata.hasAlpha && characteristics.uniqueColors < 256) ||
+    quality < 50;
+
+  // 颜色数量限制
+  const colours = usePalette 
+    ? Math.min(256, Math.max(2, Math.round(256 * (quality / 100))))
+    : 256;
+
+  const baseOptions: sharp.PngOptions = {
+    compressionLevel: strategy === "aggressive" ? 9 : compressionLevel,
+    adaptiveFiltering: true, // 自适应过滤器选择
+    palette: usePalette,
+    colours: colours,
+    effort: strategy === "quality" ? 7 : 10, // 压缩努力程度 (1-10)
+    dither: usePalette ? 1.0 : 0, // 调色板模式下使用抖动
+  };
+
+  return baseOptions;
+}
+
+/**
+ * WebP 压缩选项 - 最佳现代格式
+ */
+function getWebpOptions(
+  quality: number,
+  strategy: string,
+  characteristics: Awaited<ReturnType<typeof analyzeImageCharacteristics>>,
+  metadata: ImageMetadata
+): sharp.WebpOptions {
+  // 对于简单图形，无损 WebP 可能更小
+  const useLossless = 
+    characteristics.isSimpleGraphic && 
+    characteristics.uniqueColors < 256 &&
+    strategy !== "aggressive";
+
+  const baseOptions: sharp.WebpOptions = {
+    quality: Math.max(1, Math.min(100, quality)),
+    effort: 6, // 压缩努力程度 (0-6)
+    lossless: useLossless,
+    nearLossless: !useLossless && quality > 85, // 近无损模式
+    smartSubsample: true, // 智能色度子采样
+    alphaQuality: metadata.hasAlpha ? Math.max(quality - 10, 50) : 100,
+  };
+
+  if (strategy === "aggressive") {
+    return {
+      ...baseOptions,
+      quality: Math.max(1, quality - 15),
+      effort: 6,
+      lossless: false,
+      nearLossless: false,
+    };
+  }
+
+  return baseOptions;
+}
+
+/**
+ * AVIF 压缩选项 - 最先进的压缩格式
+ */
+function getAvifOptions(quality: number, strategy: string): sharp.AvifOptions {
+  return {
+    quality: Math.max(1, Math.min(100, quality)),
+    effort: strategy === "aggressive" ? 9 : 6, // 0-9
+    lossless: quality === 100,
+    chromaSubsampling: quality > 80 ? "4:4:4" : "4:2:0",
+  };
+}
+
+/**
+ * GIF 压缩选项
+ */
+function getGifOptions(strategy: string): sharp.GifOptions {
+  return {
+    effort: strategy === "aggressive" ? 10 : 7,
+    dither: strategy === "quality" ? 1.0 : 0.5,
+    interFrameMaxError: strategy === "aggressive" ? 10 : 5,
+    interPaletteMaxError: strategy === "aggressive" ? 5 : 3,
+  };
+}
+
+/**
+ * TIFF 压缩选项
+ */
+function getTiffOptions(quality: number, strategy: string): sharp.TiffOptions {
+  return {
+    quality: Math.max(1, Math.min(100, quality)),
+    compression: strategy === "aggressive" ? "jpeg" : "lzw",
+    predictor: "horizontal",
+  };
+}
+
+/**
+ * Batch compress multiple images
+ */
+export async function batchCompressImages(
+  files: Array<{ buffer: Buffer; name: string }>,
+  config: ImageCompressConfig,
+  onProgress?: (current: number, total: number) => void
+): Promise<Array<{ result: ProcessedImageResult; name: string }>> {
+  const results: Array<{ result: ProcessedImageResult; name: string }> = [];
+
+  for (let i = 0; i < files.length; i++) {
+    const result = await compressImage(files[i].buffer, config);
+    results.push({ result, name: files[i].name });
+
+    if (onProgress) {
+      onProgress(i + 1, files.length);
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Calculate recommended quality based on desired compression ratio
+ */
+export function calculateQualityForTargetRatio(
+  targetRatio: number,
+  currentRatio?: number,
+  currentQuality?: number
+): number {
+  if (currentRatio !== undefined && currentQuality !== undefined) {
+    const difference = targetRatio - currentRatio;
+    const adjustment = difference * 2;
+    return Math.max(1, Math.min(100, Math.round(currentQuality + adjustment)));
+  }
+
+  return Math.max(1, Math.min(100, Math.round(100 - targetRatio * 1.5)));
+}
+
+/**
+ * Validate ImageCompressConfig
+ */
+export function validateCompressConfig(config: ImageCompressConfig): {
+  valid: boolean;
+  error?: string;
+} {
+  if (!config.quality || typeof config.quality !== "number") {
+    return { valid: false, error: "Quality is required and must be a number" };
+  }
+
+  if (config.quality < 1 || config.quality > 100) {
+    return { valid: false, error: "Quality must be between 1 and 100" };
+  }
+
+  const validFormats = ["original", "auto", "jpeg", "jpg", "png", "webp", "avif", "gif", "bmp", "tiff", "tif"];
+  if (!validFormats.includes(config.format)) {
+    return { valid: false, error: `Invalid format. Allowed: ${validFormats.join(", ")}` };
+  }
+
+  if (config.resize) {
+    if (config.resize.width !== undefined) {
+      if (
+        typeof config.resize.width !== "number" ||
+        config.resize.width < 1 ||
+        config.resize.width > 16384
+      ) {
+        return { valid: false, error: "Width must be between 1 and 16384" };
+      }
+    }
+
+    if (config.resize.height !== undefined) {
+      if (
+        typeof config.resize.height !== "number" ||
+        config.resize.height < 1 ||
+        config.resize.height > 16384
+      ) {
+        return { valid: false, error: "Height must be between 1 and 16384" };
+      }
+    }
+
+    if (!config.resize.width && !config.resize.height) {
+      return { valid: false, error: "At least one of width or height must be specified" };
+    }
+
+    const validFits = ["contain", "cover", "fill"];
+    if (!validFits.includes(config.resize.fit)) {
+      return { valid: false, error: `Invalid fit. Allowed: ${validFits.join(", ")}` };
+    }
+  }
+
+  return { valid: true };
+}
+
+/**
+ * 获取格式推荐信息
+ */
+export function getFormatRecommendation(metadata: ImageMetadata): {
+  recommended: string;
+  reason: string;
+} {
+  if (metadata.isAnimated) {
+    return {
+      recommended: "webp",
+      reason: "WebP provides better compression for animated images than GIF",
+    };
+  }
+
+  if (metadata.hasAlpha) {
+    return {
+      recommended: "webp",
+      reason: "WebP supports transparency with better compression than PNG",
+    };
+  }
+
+  return {
+    recommended: "webp",
+    reason: "WebP offers the best balance of quality and file size for photos",
+  };
+}

src/lib/texture-atlas.ts

@@ -0,0 +1,824 @@
+import sharp from "sharp";
+import type {
+  TextureAtlasConfig,
+  AtlasSprite,
+  AtlasRect,
+  AtlasFrame,
+  TextureAtlasResult,
+} from "@/types";
+
+/**
+ * Texture Atlas Packing Algorithms
+ * Implements MaxRects and Shelf algorithms for packing sprites into a texture atlas
+ */
+
+interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface SpriteWithSize extends AtlasSprite {
+  area: number;
+  maxWidth: number;
+  maxHeight: number;
+}
+
+/** Frame data for Cocos Creator JSON export */
+interface FrameData {
+  frame: { x: number; y: number; w: number; h: number };
+  rotated: boolean;
+  trimmed: boolean;
+  spriteSourceSize: { x: number; y: number; w: number; h: number };
+  sourceSize: { w: number; h: number };
+}
+
+/**
+ * Calculate the next power of two size
+ */
+function nextPowerOfTwo(value: number): number {
+  return Math.pow(2, Math.ceil(Math.log2(value)));
+}
+
+/**
+ * Ensure size is power of two if required
+ */
+function adjustSizeForPot(value: number, pot: boolean): number {
+  return pot ? nextPowerOfTwo(value) : value;
+}
+
+/**
+ * MaxRects Algorithm Implementation
+ * Best for general purpose packing with good space efficiency
+ */
+class MaxRectsPacker {
+  private binWidth: number;
+  private binHeight: number;
+  private usedRectangles: Rectangle[] = [];
+  private freeRectangles: Rectangle[] = [];
+  private allowRotation: boolean;
+
+  constructor(width: number, height: number, allowRotation: boolean) {
+    this.binWidth = width;
+    this.binHeight = height;
+    this.allowRotation = allowRotation;
+    this.freeRectangles.push({ x: 0, y: 0, width, height });
+  }
+
+  /**
+   * Insert a rectangle and return its position
+   */
+  insert(width: number, height: number): { x: number; y: number; rotated: boolean } | null {
+    let bestNode = this.findPositionForNewNodeBestAreaFit(width, height);
+    let rotated = false;
+
+    // Try rotated version if allowed
+    if (this.allowRotation && width !== height) {
+      const rotatedNode = this.findPositionForNewNodeBestAreaFit(height, width);
+      if (
+        !bestNode ||
+        (rotatedNode && rotatedNode.height * rotatedNode.width < bestNode.height * bestNode.width)
+      ) {
+        bestNode = rotatedNode;
+        rotated = true;
+        [width, height] = [height, width];
+      }
+    }
+
+    if (!bestNode) {
+      return null;
+    }
+
+    // Split the free rectangles
+    this.splitFreeRectangles(bestNode, width, height);
+
+    // Add to used rectangles
+    this.usedRectangles.push({
+      x: bestNode.x,
+      y: bestNode.y,
+      width,
+      height,
+    });
+
+    return { x: bestNode.x, y: bestNode.y, rotated };
+  }
+
+  /**
+   * Find the best position for a new rectangle using the Best Area Fit heuristic
+   */
+  private findPositionForNewNodeBestAreaFit(
+    width: number,
+    height: number
+  ): Rectangle | null {
+    let bestNode: Rectangle | null = null;
+    let bestAreaFit = Number.MAX_VALUE;
+    let bestShortSideFit = Number.MAX_VALUE;
+
+    for (const rect of this.freeRectangles) {
+      const areaFit = rect.width * rect.height - width * height;
+
+      // Check if rectangle fits
+      if (rect.width >= width && rect.height >= height) {
+        const leftoverHoriz = Math.abs(rect.width - width);
+        const leftoverVert = Math.abs(rect.height - height);
+        const shortSideFit = Math.min(leftoverHoriz, leftoverVert);
+
+        if (areaFit < bestAreaFit || (areaFit === bestAreaFit && shortSideFit < bestShortSideFit)) {
+          bestNode = { x: rect.x, y: rect.y, width, height };
+          bestShortSideFit = shortSideFit;
+          bestAreaFit = areaFit;
+        }
+      }
+    }
+
+    return bestNode;
+  }
+
+  /**
+   * Split free rectangles after placing a rectangle
+   */
+  private splitFreeRectangles(node: Rectangle, width: number, height: number): void {
+    // Process in reverse order to avoid iteration issues
+    for (let i = this.freeRectangles.length - 1; i >= 0; i--) {
+      const freeRect = this.freeRectangles[i];
+      if (this.splitFreeRectangle(freeRect, node, width, height)) {
+        this.freeRectangles.splice(i, 1);
+      }
+    }
+
+    // Remove degenerate rectangles
+    this.freeRectangles = this.freeRectangles.filter(
+      (rect) => rect.width > 0 && rect.height > 0
+    );
+  }
+
+  /**
+   * Split a single free rectangle
+   */
+  private splitFreeRectangle(
+    freeRect: Rectangle,
+    usedNode: Rectangle,
+    width: number,
+    height: number
+  ): boolean {
+    // Check if intersection exists
+    if (
+      freeRect.x >= usedNode.x + width ||
+      freeRect.x + freeRect.width <= usedNode.x ||
+      freeRect.y >= usedNode.y + height ||
+      freeRect.y + freeRect.height <= usedNode.y
+    ) {
+      return false;
+       // Split into new free rectangles
+    }
+
+    if (freeRect.x < usedNode.x) {
+      const newRect = {
+        x: freeRect.x,
+        y: freeRect.y,
+        width: usedNode.x - freeRect.x,
+        height: freeRect.height,
+      };
+      this.freeRectangles.push(newRect);
+    }
+
+    if (freeRect.x + freeRect.width > usedNode.x + width) {
+      const newRect = {
+        x: usedNode.x + width,
+        y: freeRect.y,
+        width: freeRect.x + freeRect.width - (usedNode.x + width),
+        height: freeRect.height,
+      };
+      this.freeRectangles.push(newRect);
+    }
+
+    if (freeRect.y < usedNode.y) {
+      const newRect = {
+        x: freeRect.x,
+        y: freeRect.y,
+        width: freeRect.width,
+        height: usedNode.y - freeRect.y,
+      };
+      this.freeRectangles.push(newRect);
+    }
+
+    if (freeRect.y + freeRect.height > usedNode.y + height) {
+      const newRect = {
+        x: freeRect.x,
+        y: usedNode.y + height,
+        width: freeRect.width,
+        height: freeRect.y + freeRect.height - (usedNode.y + height),
+      };
+      this.freeRectangles.push(newRect);
+    }
+
+    return true;
+  }
+
+  /**
+   * Calculate occupancy ratio
+   */
+  getOccupancy(): number {
+    const usedArea = this.usedRectangles.reduce((sum, rect) => sum + rect.width * rect.height, 0);
+    return (usedArea / (this.binWidth * this.binHeight)) * 100;
+  }
+}
+
+/**
+ * Shelf Algorithm Implementation
+ * Simple and fast algorithm that packs sprites in horizontal shelves
+ */
+class ShelfPacker {
+  private shelves: Shelf[] = [];
+  private currentY = 0;
+  private allowRotation: boolean;
+  private binWidth: number;
+  private padding: number;
+
+  constructor(binWidth: number, allowRotation: boolean, padding: number) {
+    this.binWidth = binWidth;
+    this.allowRotation = allowRotation;
+    this.padding = padding;
+  }
+
+  /**
+   * Insert a rectangle
+   */
+  insert(width: number, height: number): { x: number; y: number; rotated: boolean } | null {
+    const paddedWidth = width + this.padding;
+    const paddedHeight = height + this.padding;
+
+    // Try to fit in existing shelves
+    for (const shelf of this.shelves) {
+      if (this.allowRotation && width !== height) {
+        // Try rotated
+        if (shelf.currentX + height + this.padding <= this.binWidth) {
+          const result = { x: shelf.currentX, y: shelf.y, rotated: true };
+          shelf.currentX += height + this.padding;
+          shelf.height = Math.max(shelf.height, paddedWidth);
+          return result;
+        }
+      }
+
+      if (shelf.currentX + paddedWidth <= this.binWidth) {
+        const result = { x: shelf.currentX, y: shelf.y, rotated: false };
+        shelf.currentX += paddedWidth;
+        shelf.height = Math.max(shelf.height, paddedHeight);
+        return result;
+      }
+    }
+
+    // Try to create a new shelf
+    const newShelfY = this.currentY;
+    if (newShelfY + paddedHeight > this.binHeight) {
+      return null; // Doesn't fit
+    }
+
+    const newShelf: Shelf = {
+      y: newShelfY,
+      currentX: 0,
+      height: paddedHeight,
+    };
+
+    if (this.allowRotation && width !== height) {
+      // Try rotated
+      if (newShelf.currentX + height + this.padding <= this.binWidth) {
+        newShelf.currentX += height + this.padding;
+        newShelf.height = Math.max(newShelf.height, paddedWidth);
+        this.shelves.push(newShelf);
+        this.currentY += newShelf.height;
+        return { x: 0, y: newShelfY, rotated: true };
+      }
+    }
+
+    if (newShelf.currentX + paddedWidth <= this.binWidth) {
+      newShelf.currentX += paddedWidth;
+      this.shelves.push(newShelf);
+      this.currentY += newShelf.height;
+      return { x: 0, y: newShelfY, rotated: false };
+    }
+
+    return null;
+  }
+
+  private binHeight = Number.MAX_VALUE;
+}
+
+interface Shelf {
+  y: number;
+  currentX: number;
+  height: number;
+}
+
+/**
+ * Sort sprites by size (largest first)
+ */
+function sortSpritesBySize(sprites: SpriteWithSize[]): SpriteWithSize[] {
+  return [...sprites].sort((a, b) => {
+    // First by max dimension
+    const maxA = Math.max(a.width, a.height);
+    const maxB = Math.max(b.width, b.height);
+    if (maxA !== maxB) return maxB - maxA;
+
+    // Then by area
+    if (b.area !== a.area) return b.area - a.area;
+
+    // Finally by perimeter
+    const periA = a.width + a.height;
+    const periB = b.width + b.height;
+    return periB - periA;
+  });
+}
+
+/**
+ * Pack sprites using MaxRects algorithm
+ */
+function packWithMaxRects(
+  sprites: SpriteWithSize[],
+  config: TextureAtlasConfig
+): Map<string, AtlasRect & { rotated: boolean }> {
+  const padding = config.padding;
+  const effectiveWidth = config.maxWidth;
+  const effectiveHeight = config.maxHeight;
+
+  const packer = new MaxRectsPacker(effectiveWidth, effectiveHeight, config.allowRotation);
+  const placements = new Map<string, AtlasRect & { rotated: boolean }>();
+
+  for (const sprite of sortSpritesBySize(sprites)) {
+    const paddedWidth = sprite.width + padding * 2;
+    const paddedHeight = sprite.height + padding * 2;
+
+    const position = packer.insert(paddedWidth, paddedHeight);
+
+    if (!position) {
+      throw new Error(`Failed to pack sprite: ${sprite.name}`);
+    }
+
+    placements.set(sprite.id, {
+      x: position.x + padding,
+      y: position.y + padding,
+      width: sprite.width,
+      height: sprite.height,
+      rotated: position.rotated,
+    });
+  }
+
+  return placements;
+}
+
+/**
+ * Pack sprites using Shelf algorithm
+ */
+function packWithShelf(
+  sprites: SpriteWithSize[],
+  config: TextureAtlasConfig
+): Map<string, AtlasRect & { rotated: boolean }> {
+  const padding = config.padding;
+  const effectiveWidth = config.maxWidth;
+
+  const packer = new ShelfPacker(effectiveWidth, config.allowRotation, padding);
+  const placements = new Map<string, AtlasRect & { rotated: boolean }>();
+
+  for (const sprite of sortSpritesBySize(sprites)) {
+    const position = packer.insert(sprite.width, sprite.height);
+
+    if (!position) {
+      throw new Error(`Failed to pack sprite: ${sprite.name}`);
+    }
+
+    placements.set(sprite.id, {
+      x: position.x + padding,
+      y: position.y + padding,
+      width: sprite.width,
+      height: sprite.height,
+      rotated: position.rotated,
+    });
+  }
+
+  return placements;
+}
+
+/**
+ * Create texture atlas from sprites
+ */
+export async function createTextureAtlas(
+  sprites: AtlasSprite[],
+  config: TextureAtlasConfig
+): Promise<TextureAtlasResult> {
+  // Validate sprites and get dimensions
+  const spritesWithSize: SpriteWithSize[] = [];
+
+  for (const sprite of sprites) {
+    const metadata = await sharp(sprite.buffer).metadata();
+    const width = metadata.width || 0;
+    const height = metadata.height || 0;
+
+    if (width === 0 || height === 0) {
+      throw new Error(`Invalid sprite dimensions: ${sprite.name}`);
+    }
+
+    const area = width * height;
+
+    spritesWithSize.push({
+      ...sprite,
+      width,
+      height,
+      area,
+      maxWidth: width,
+      maxHeight: height,
+    });
+  }
+
+  // Sort sprites by size
+  const sortedSprites = sortSpritesBySize(spritesWithSize);
+
+  // Calculate minimum required dimensions
+  const maxSpriteWidth = Math.max(...sortedSprites.map((s) => s.width));
+  const maxSpriteHeight = Math.max(...sortedSprites.map((s) => s.height));
+  const padding = config.padding;
+
+  // Estimate minimum size based on total area with packing efficiency factor
+  const paddedArea = sortedSprites.reduce((sum, s) => {
+    const pw = s.width + padding * 2;
+    const ph = s.height + padding * 2;
+    return sum + pw * ph;
+  }, 0);
+  
+  // Start with a square estimate, accounting for ~85% packing efficiency
+  const minSide = Math.ceil(Math.sqrt(paddedArea / 0.85));
+  let estimatedWidth = Math.max(maxSpriteWidth + padding * 2, minSide);
+  let estimatedHeight = Math.max(maxSpriteHeight + padding * 2, minSide);
+
+  // Adjust for power of two if required
+  estimatedWidth = adjustSizeForPot(estimatedWidth, config.pot);
+  estimatedHeight = adjustSizeForPot(estimatedHeight, config.pot);
+
+  // Ensure within max bounds
+  estimatedWidth = Math.min(estimatedWidth, config.maxWidth);
+  estimatedHeight = Math.min(estimatedHeight, config.maxHeight);
+
+  // Try to pack with increasing size if needed
+  let placements: Map<string, AtlasRect & { rotated: boolean }>;
+  let finalWidth = estimatedWidth;
+  let finalHeight = estimatedHeight;
+  let success = false;
+
+  // Generate size attempts: start small and increase progressively
+  const sizeAttempts: { w: number; h: number }[] = [];
+  
+  // Add the estimated size first
+  sizeAttempts.push({ w: estimatedWidth, h: estimatedHeight });
+  
+  // For POT sizes, try all combinations up to max
+  if (config.pot) {
+    const potSizes = [64, 128, 256, 512, 1024, 2048, 4096].filter(
+      (s) => s <= config.maxWidth || s <= config.maxHeight
+    );
+    for (const w of potSizes) {
+      for (const h of potSizes) {
+        if (w <= config.maxWidth && h <= config.maxHeight && 
+            w >= maxSpriteWidth + padding * 2 && 
+            h >= maxSpriteHeight + padding * 2) {
+          sizeAttempts.push({ w, h });
+        }
+      }
+    }
+    // Sort by area to try smallest sizes first
+    sizeAttempts.sort((a, b) => a.w * a.h - b.w * b.h);
+  } else {
+    // For non-POT, try progressively larger sizes
+    sizeAttempts.push(
+      { w: estimatedWidth * 1.5, h: estimatedHeight },
+      { w: estimatedWidth, h: estimatedHeight * 1.5 },
+      { w: estimatedWidth * 1.5, h: estimatedHeight * 1.5 },
+      { w: estimatedWidth * 2, h: estimatedHeight },
+      { w: estimatedWidth, h: estimatedHeight * 2 },
+      { w: estimatedWidth * 2, h: estimatedHeight * 2 },
+      { w: config.maxWidth, h: config.maxHeight }
+    );
+  }
+  
+  // Remove duplicates and filter invalid sizes
+  const uniqueAttempts = sizeAttempts.filter((attempt, index, self) => {
+    const w = Math.min(Math.ceil(attempt.w), config.maxWidth);
+    const h = Math.min(Math.ceil(attempt.h), config.maxHeight);
+    return self.findIndex(a => 
+      Math.min(Math.ceil(a.w), config.maxWidth) === w && 
+      Math.min(Math.ceil(a.h), config.maxHeight) === h
+    ) === index;
+  });
+
+  for (const attempt of uniqueAttempts) {
+    const attemptWidth = Math.min(
+      config.pot ? adjustSizeForPot(Math.ceil(attempt.w), true) : Math.ceil(attempt.w), 
+      config.maxWidth
+    );
+    const attemptHeight = Math.min(
+      config.pot ? adjustSizeForPot(Math.ceil(attempt.h), true) : Math.ceil(attempt.h), 
+      config.maxHeight
+    );
+
+    if (attemptWidth > config.maxWidth || attemptHeight > config.maxHeight) {
+      continue;
+    }
+
+    try {
+      const testConfig = { ...config, maxWidth: attemptWidth, maxHeight: attemptHeight };
+
+      if (config.algorithm === "MaxRects") {
+        placements = packWithMaxRects(sortedSprites, testConfig);
+      } else {
+        placements = packWithShelf(sortedSprites, testConfig);
+      }
+
+      // Calculate actual used dimensions
+      let maxX = 0;
+      let maxY = 0;
+      for (const [, placement] of placements) {
+        maxX = Math.max(maxX, placement.x + placement.width + padding);
+        maxY = Math.max(maxY, placement.y + placement.height + padding);
+      }
+      
+      // Calculate the minimum required dimensions based on actual content
+      // For POT mode: find the smallest power of two that fits the actual content
+      // For non-POT mode: use the actual content size
+      if (config.pot) {
+        // Find smallest POT size that fits the actual content
+        finalWidth = adjustSizeForPot(Math.ceil(maxX), true);
+        finalHeight = adjustSizeForPot(Math.ceil(maxY), true);
+        
+        // Ensure we don't exceed max limits
+        finalWidth = Math.min(finalWidth, config.maxWidth);
+        finalHeight = Math.min(finalHeight, config.maxHeight);
+      } else {
+        // For non-POT, use exact dimensions needed
+        finalWidth = Math.ceil(maxX);
+        finalHeight = Math.ceil(maxY);
+        
+        // Ensure we don't exceed max limits
+        finalWidth = Math.min(finalWidth, config.maxWidth);
+        finalHeight = Math.min(finalHeight, config.maxHeight);
+      }
+      
+      success = true;
+      break;
+    } catch {
+      // Try next size
+      continue;
+    }
+  }
+
+  if (!success) {
+    throw new Error(
+      "Unable to pack all sprites into the specified maximum dimensions. Try increasing the max size or using rotation."
+    );
+  }
+
+  // Create the composite image
+  const composite = sharp({
+    create: {
+      width: finalWidth,
+      height: finalHeight,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 },
+    },
+  });
+
+  const composites: {
+    input: Buffer;
+    left: number;
+    top: number;
+  }[] = [];
+
+  const frames: AtlasFrame[] = [];
+
+  for (const sprite of sortedSprites) {
+    const placement = placements!.get(sprite.id);
+    if (!placement) continue;
+
+    const image = sharp(sprite.buffer);
+    const metadata = await image.metadata();
+
+    // Handle rotation
+    let processedImage = image;
+    let spriteWidth = placement.width;
+    let spriteHeight = placement.height;
+
+    if (placement.rotated) {
+      processedImage = image.rotate(90);
+      [spriteWidth, spriteHeight] = [placement.height, placement.width];
+    }
+
+    const processedBuffer = await processedImage.toBuffer();
+
+    composites.push({
+      input: processedBuffer,
+      left: placement.x,
+      top: placement.y,
+    });
+
+    // Create frame data
+    frames.push({
+      filename: sprite.name,
+      frame: {
+        x: placement.x,
+        y: placement.y,
+        width: spriteWidth,
+        height: spriteHeight,
+      },
+      rotated: placement.rotated,
+      trimmed: false,
+      spriteSourceSize: { x: 0, y: 0, w: spriteWidth, h: spriteHeight },
+      sourceSize: {
+        w: metadata.width || spriteWidth,
+        h: metadata.height || spriteHeight,
+      },
+    });
+  }
+
+  const result = composite.composite(composites);
+
+  // Encode based on format
+  let outputBuffer: Buffer;
+  if (config.format === "png") {
+    outputBuffer = await result.png().toBuffer();
+  } else {
+    outputBuffer = await result.webp({ quality: config.quality }).toBuffer();
+  }
+
+  return {
+    width: finalWidth,
+    height: finalHeight,
+    image: outputBuffer,
+    frames,
+    format: config.format,
+  };
+}
+
+/**
+ * Export atlas data to Cocos2d plist format
+ */
+export function exportToCocos2dPlist(atlas: TextureAtlasResult, imageFilename: string): string {
+  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
+  xml += '<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">\n';
+  xml += '<plist version="1.0">\n';
+  xml += '<dict>\n';
+  
+  // Frames
+  xml += '\t<key>frames</key>\n';
+  xml += '\t<dict>\n';
+  
+  for (const frame of atlas.frames) {
+    xml += `\t\t<key>${escapeXml(frame.filename)}</key>\n`;
+    xml += '\t\t<dict>\n';
+    
+    // frame: {{x,y},{w,h}}
+    xml += '\t\t\t<key>frame</key>\n';
+    xml += `\t\t\t<string>{{${Math.round(frame.frame.x)},${Math.round(frame.frame.y)}},{${Math.round(frame.frame.width)},${Math.round(frame.frame.height)}}}</string>\n`;
+    
+    // offset: {0,0}
+    xml += '\t\t\t<key>offset</key>\n';
+    xml += '\t\t\t<string>{0,0}</string>\n';
+    
+    // rotated
+    xml += '\t\t\t<key>rotated</key>\n';
+    xml += `\t\t\t<${frame.rotated ? 'true' : 'false'}/>\n`;
+    
+    // sourceColorRect: {{x,y},{w,h}}
+    xml += '\t\t\t<key>sourceColorRect</key>\n';
+    xml += `\t\t\t<string>{{${frame.spriteSourceSize.x},${frame.spriteSourceSize.y}},{${frame.spriteSourceSize.w},${frame.spriteSourceSize.h}}}</string>\n`;
+    
+    // sourceSize: {w,h}
+    xml += '\t\t\t<key>sourceSize</key>\n';
+    xml += `\t\t\t<string>{${frame.sourceSize.w},${frame.sourceSize.h}}</string>\n`;
+    
+    xml += '\t\t</dict>\n';
+  }
+  
+  xml += '\t</dict>\n';
+  
+  // Metadata
+  xml += '\t<key>metadata</key>\n';
+  xml += '\t<dict>\n';
+  xml += '\t\t<key>format</key>\n';
+  xml += '\t\t<integer>2</integer>\n';
+  xml += '\t\t<key>realTextureFileName</key>\n';
+  xml += `\t\t<string>${escapeXml(imageFilename)}</string>\n`;
+  xml += '\t\t<key>size</key>\n';
+  xml += `\t\t<string>{${atlas.width},${atlas.height}}</string>\n`;
+  xml += '\t\t<key>textureFileName</key>\n';
+  xml += `\t\t<string>${escapeXml(imageFilename)}</string>\n`;
+  xml += '\t</dict>\n';
+  
+  xml += '</dict>\n';
+  xml += '</plist>\n';
+
+  return xml;
+}
+
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+/**
+ * Export atlas data to Cocos Creator JSON format
+ */
+export function exportToCocosCreatorJson(atlas: TextureAtlasResult, imageFilename: string): string {
+  return JSON.stringify(
+    {
+      meta: {
+        image: imageFilename,
+        size: { w: atlas.width, h: atlas.height },
+        format: atlas.format,
+      },
+      frames: atlas.frames.reduce((acc, frame) => {
+        acc[frame.filename] = {
+          frame: {
+            x: Math.round(frame.frame.x),
+            y: Math.round(frame.frame.y),
+            w: Math.round(frame.frame.width),
+            h: Math.round(frame.frame.height),
+          },
+          rotated: frame.rotated,
+          trimmed: frame.trimmed,
+          spriteSourceSize: frame.spriteSourceSize,
+          sourceSize: frame.sourceSize,
+        };
+        return acc;
+      }, {} as Record<string, FrameData>),
+    },
+    null,
+    2
+  );
+}
+
+/**
+ * Export atlas data to generic JSON format
+ */
+export function exportToGenericJson(atlas: TextureAtlasResult, imageFilename: string): string {
+  return JSON.stringify(
+    {
+      image: imageFilename,
+      width: atlas.width,
+      height: atlas.height,
+      format: atlas.format,
+      frames: atlas.frames.map((frame) => ({
+        filename: frame.filename,
+        x: Math.round(frame.frame.x),
+        y: Math.round(frame.frame.y),
+        width: Math.round(frame.frame.width),
+        height: Math.round(frame.frame.height),
+        rotated: frame.rotated,
+      })),
+    },
+    null,
+    2
+  );
+}
+
+/**
+ * Validate texture atlas config
+ */
+export function validateTextureAtlasConfig(config: TextureAtlasConfig): {
+  valid: boolean;
+  error?: string;
+} {
+  if (config.maxWidth < 64 || config.maxWidth > 8192) {
+    return { valid: false, error: "Max width must be between 64 and 8192" };
+  }
+
+  if (config.maxHeight < 64 || config.maxHeight > 8192) {
+    return { valid: false, error: "Max height must be between 64 and 8192" };
+  }
+
+  if (config.padding < 0 || config.padding > 16) {
+    return { valid: false, error: "Padding must be between 0 and 16" };
+  }
+
+  if (config.quality < 1 || config.quality > 100) {
+    return { valid: false, error: "Quality must be between 1 and 100" };
+  }
+
+  const validFormats = ["png", "webp"];
+  if (!validFormats.includes(config.format)) {
+    return { valid: false, error: `Invalid format. Allowed: ${validFormats.join(", ")}` };
+  }
+
+  const validOutputFormats = ["cocos2d", "cocos-creator", "generic-json"];
+  if (!validOutputFormats.includes(config.outputFormat)) {
+    return { valid: false, error: `Invalid output format. Allowed: ${validOutputFormats.join(", ")}` };
+  }
+
+  const validAlgorithms = ["MaxRects", "Shelf"];
+  if (!validAlgorithms.includes(config.algorithm)) {
+    return { valid: false, error: `Invalid algorithm. Allowed: ${validAlgorithms.join(", ")}` };
+  }
+
+  return { valid: true };
+}

src/lib/utils.ts

@@ -76,7 +76,7 @@ export function generateId(): string {
 /**
  * Debounce function
  */
-export function debounce<T extends (...args: any[]) => any>(
+export function debounce<T extends (...args: unknown[]) => unknown>(
   func: T,
   wait: number
 ): (...args: Parameters<T>) => void {

src/locales/en.json

@@ -0,0 +1,394 @@
+{
+  "common": {
+    "appName": "KYMR",
+    "loading": "Loading...",
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close",
+    "confirm": "Confirm",
+    "back": "Back",
+    "next": "Next",
+    "download": "Download",
+    "share": "Share",
+    "reset": "Reset",
+    "submit": "Submit",
+    "tryNow": "Try it now",
+    "learnMore": "Learn More",
+    "getStarted": "Get Started",
+    "startBuilding": "Start Building",
+    "signIn": "Sign In",
+    "register": "Register",
+    "features": "Features",
+    "settings": "Settings",
+    "toggleMenu": "Toggle menu",
+    "processing": "Processing...",
+    "uploading": "Uploading...",
+    "completed": "Completed!",
+    "failed": "Failed",
+    "ready": "Ready to process",
+    "file": "File",
+    "files": "files",
+    "yes": "Yes",
+    "no": "No",
+    "on": "On",
+    "off": "Off"
+  },
+  "nav": {
+    "tools": "Tools",
+    "docs": "Docs",
+    "about": "About",
+    "dashboard": "Dashboard",
+    "overview": "Overview"
+  },
+  "home": {
+    "hero": {
+      "kicker": "Built for asset prep",
+      "title": "Empowering Game Development",
+      "description": "Video to frames, image compression, audio optimization. Everything you need to prepare game assets, in one place.",
+      "startBuilding": "Start Building",
+      "secondaryCta": "Explore tools",
+      "note": "No plugins. No setup. Just ship assets faster.",
+      "previewTitle": "Asset Processing Workbench",
+      "stats": {
+        "developers": "Developers",
+        "filesProcessed": "Files Processed",
+        "uptime": "Uptime"
+      }
+    },
+    "featuresSection": {
+      "title": "Everything You Need",
+      "description": "Powerful tools designed specifically for game developers"
+    },
+    "showcase": {
+      "kicker": "Three tools. Zero clutter.",
+      "title": "A smoother pipeline for everyday assets",
+      "description": "Minimal controls. Predictable results. Designed to keep you in flow.",
+      "cta": "Open tool"
+    },
+    "workflow": {
+      "title": "Treat assets like a build step",
+      "description": "Clear inputs, clear outputs. Repeatable settings. Less trial-and-error.",
+      "steps": {
+        "step1": {
+          "title": "Drop files",
+          "description": "Batch-friendly. Drag files in and keep moving."
+        },
+        "step2": {
+          "title": "Tune the essentials",
+          "description": "Only the knobs you actually need: quality, FPS, formats."
+        },
+        "step3": {
+          "title": "Export clean outputs",
+          "description": "Structured results that fit right into art and engineering workflows."
+        }
+      }
+    },
+    "quality": {
+      "title": "Fast, stable, intentional",
+      "description": "Not feature bloat—just a better interaction loop.",
+      "items": {
+        "fast": {
+          "title": "Lightning fast",
+          "description": "Spend less time waiting and more time building."
+        },
+        "private": {
+          "title": "Secure by default",
+          "description": "Minimize exposure and keep processing straightforward."
+        },
+        "designed": {
+          "title": "Designed for devs",
+          "description": "Clear information hierarchy and repeatable rhythm across tools."
+        }
+      }
+    },
+    "final": {
+      "title": "Start now. Keep your time for the game.",
+      "description": "Pick a tool and build a faster workflow from the first asset.",
+      "primaryCta": "Get started",
+      "secondaryCta": "Try Video to Frames"
+    },
+    "tools": {
+      "videoToFrames": {
+        "title": "Video to Frames",
+        "description": "Extract frames from videos with customizable frame rates. Perfect for sprite animations."
+      },
+      "imageCompression": {
+        "title": "Image Compression",
+        "description": "Optimize images for web and mobile without quality loss. Support for batch processing."
+      },
+      "audioCompression": {
+        "title": "Audio Compression",
+        "description": "Compress and convert audio files to various formats. Adjust bitrate and sample rate."
+      },
+      "textureAtlas": {
+        "title": "Texture Atlas",
+        "description": "Combine multiple sprites into optimized texture atlases. Perfect for game performance."
+      },
+      "aiTools": {
+        "title": "More Tools",
+        "description": "Additional utilities for game development. Coming soon."
+      }
+    },
+    "benefits": {
+      "title": "Why Choose KYMR?",
+      "description": "We understand the unique challenges of game development. Our tools are built to help you work faster and smarter.",
+      "lightningFast": {
+        "title": "Lightning Fast",
+        "description": "Process files in seconds with our optimized infrastructure."
+      },
+      "secure": {
+        "title": "Secure & Private",
+        "description": "Your files are encrypted and automatically deleted after processing."
+      },
+      "forDevelopers": {
+        "title": "Built for Developers",
+        "description": "API access, batch processing, and tools designed for game development workflows."
+      }
+    },
+    "cta": {
+      "title": "Ready to Level Up?",
+      "description": "Join thousands of game developers building amazing games with our tools.",
+      "getStarted": "Start Creating"
+    }
+  },
+  "sidebar": {
+    "tools": "Tools",
+    "aiTools": "More Tools",
+    "videoToFrames": "Video to Frames",
+    "imageCompression": "Image Compression",
+    "audioCompression": "Audio Compression",
+    "textureAtlas": "Texture Atlas",
+    "aiImage": "AI Image",
+    "aiAudio": "AI Audio"
+  },
+  "uploader": {
+    "dropFiles": "Drag & drop files here",
+    "dropActive": "Drop your files here",
+    "fileRejected": "File type not accepted",
+    "browseFiles": "or click to browse • Max {{maxSize}} • Up to {{maxFiles}} {{file}}",
+    "file_one": "file",
+    "file_other": "files"
+  },
+  "progress": {
+    "status": {
+      "idle": "Ready to process",
+      "uploading": "Uploading...",
+      "processing": "Processing...",
+      "completed": "Completed!",
+      "failed": "Failed"
+    }
+  },
+  "config": {
+    "imageCompression": {
+      "title": "Compression Settings",
+      "description": "Configure compression options",
+      "quality": "Compression Quality",
+      "qualityDescription": "Lower quality = smaller file size",
+      "format": "Output Format",
+      "formatDescription": "Convert to a different format (optional)",
+      "formatOriginal": "Original",
+      "formatAuto": "Auto (Best)",
+      "formatJpeg": "JPEG",
+      "formatPng": "PNG",
+      "formatWebp": "WebP",
+      "formatAvif": "AVIF"
+    },
+    "videoFrames": {
+      "title": "Export Settings",
+      "description": "Configure how frames are extracted",
+      "fps": "Frame Rate",
+      "fpsDescription": "Number of frames to extract per second",
+      "format": "Output Format",
+      "formatDescription": "Image format for the extracted frames",
+      "quality": "Quality",
+      "qualityDescription": "Image quality (for JPEG and WebP)"
+    },
+    "audioCompression": {
+      "title": "Audio Settings",
+      "description": "Configure compression parameters",
+      "bitrate": "Bitrate",
+      "bitrateDescription": "Higher bitrate = better quality, larger file",
+      "format": "Output Format",
+      "formatDescription": "Target audio format",
+      "sampleRate": "Sample Rate",
+      "sampleRateDescription": "Audio sample rate in Hz",
+      "channels": "Channels",
+      "channelsDescription": "Audio channels",
+      "stereo": "Stereo (2 channels)",
+      "mono": "Mono (1 channel)"
+    },
+    "textureAtlas": {
+      "title": "Atlas Settings",
+      "description": "Configure texture atlas generation",
+      "maxWidth": "Max Width",
+      "maxWidthDescription": "Maximum atlas width in pixels",
+      "maxHeight": "Max Height",
+      "maxHeightDescription": "Maximum atlas height in pixels",
+      "padding": "Padding",
+      "paddingDescription": "Space between sprites (prevents bleeding)",
+      "allowRotation": "Allow Rotation",
+      "allowRotationDescription": "Rotate sprites for better packing efficiency",
+      "pot": "Power of Two",
+      "potDescription": "Use power-of-two dimensions (512, 1024, 2048, etc.)",
+      "format": "Image Format",
+      "formatDescription": "Output image format",
+      "quality": "Quality",
+      "qualityDescription": "Compression quality for WebP format",
+      "outputFormat": "Data Format",
+      "outputFormatDescription": "Format for sprite metadata",
+      "algorithm": "Packing Algorithm",
+      "algorithmDescription": "Algorithm for arranging sprites",
+      "formatPng": "PNG (Lossless)",
+      "formatWebp": "WebP (Compressed)",
+      "outputCocos2d": "Cocos2d plist",
+      "outputCocosCreator": "Cocos Creator JSON",
+      "outputGeneric": "Generic JSON",
+      "algorithmMaxRects": "MaxRects (Best)",
+      "algorithmShelf": "Shelf (Fast)",
+      "multiAtlas": "Multi-Atlas",
+      "multiAtlasDescription": "Auto pack overflow sprites into multiple atlases",
+      "compression": "PNG Compression",
+      "compressionDescription": "Compress PNG using quantization algorithm"
+    }
+  },
+  "tools": {
+    "imageCompression": {
+      "title": "Image Compression",
+      "description": "World-class image compression with smart optimization",
+      "compressImages": "Compress Images",
+      "features": "Features",
+      "featureList": [
+        "Smart compression - guaranteed smaller output or return original",
+        "Multi-strategy optimization - tries multiple algorithms to find the best result",
+        "Auto format selection - intelligently picks the best format for your image",
+        "MozJPEG & WebP - industry-leading compression algorithms",
+        "Metadata stripping - automatic removal of EXIF and unnecessary data",
+        "Batch processing - compress multiple images at once"
+      ]
+    },
+    "videoFrames": {
+      "title": "Video to Frames",
+      "description": "Extract frames from videos with customizable settings",
+      "processVideo": "Process Video",
+      "howItWorks": "How it works",
+      "steps": [
+        "Upload your video file (MP4, MOV, AVI, etc.)",
+        "Configure frame rate, format, and quality",
+        "Click \"Process Video\" to start extraction",
+        "Download the ZIP file with all frames"
+      ]
+    },
+    "audioCompression": {
+      "title": "Audio Compression",
+      "description": "Compress and convert audio files with quality control",
+      "compressAudio": "Compress Audio",
+      "supportedFormats": "Supported Formats",
+      "input": "Input",
+      "output": "Output",
+      "inputFormats": "MP3, WAV, OGG, AAC, FLAC, M4A",
+      "outputFormats": "MP3, AAC, OGG, FLAC"
+    },
+    "textureAtlas": {
+      "title": "Texture Atlas",
+      "description": "Combine multiple images into a single texture atlas for game development",
+      "createAtlas": "Create Texture Atlas",
+      "features": "Features",
+      "featureList": [
+        "Smart packing - MaxRects algorithm for optimal space usage",
+        "Cocos Creator compatible - export in plist/JSON format",
+        "Rotation support - can rotate sprites for better packing",
+        "Power of Two - automatic POT sizing for better compatibility"
+      ],
+      "downloadAll": "Download All",
+      "downloadImage": "Download Image",
+      "downloadData": "Download Data",
+      "dimensions": "Dimensions",
+      "sprites": "Sprites",
+      "imageFormat": "Image Format",
+      "dataFormat": "Data Format"
+    }
+  },
+  "processing": {
+    "uploadingImages": "Uploading images...",
+    "compressingImages": "Compressing images...",
+    "uploadingVideo": "Uploading video...",
+    "extractingFrames": "Extracting frames...",
+    "uploadingAudio": "Uploading audio...",
+    "compressingAudio": "Compressing audio...",
+    "uploadingSprites": "Uploading sprites...",
+    "creatingAtlas": "Creating texture atlas...",
+    "compressionComplete": "Compression complete!",
+    "processingComplete": "Processing complete!",
+    "atlasComplete": "Texture atlas created successfully!",
+    "compressionFailed": "Compression failed",
+    "processingFailed": "Processing failed",
+    "unknownError": "Unknown error",
+    "uploadProgress": "Uploading... {{progress}}%",
+    "compressProgress": "Compressing... {{progress}}%",
+    "processProgress": "Processing... {{progress}}%"
+  },
+  "results": {
+    "processingComplete": "Processing Complete",
+    "filesReady": "{{count}} {{file}} ready for download",
+    "file_one": "file",
+    "file_other": "files",
+    "saved": "Saved {{ratio}}%"
+  },
+  "preview": {
+    "title": "Image Comparison",
+    "original": "Original",
+    "compressed": "Compressed",
+    "dragHint": "Drag slider or click to compare",
+    "filename": "Filename"
+  },
+  "atlas": {
+    "dropSprites": "Drop sprites here",
+    "supportFolder": "Supports folder drag and drop",
+    "selectFiles": "Select Files",
+    "selectFolder": "Select Folder",
+    "preview": "Preview",
+    "emptyPreview": "Upload sprites to preview atlas",
+    "dragHint": "Drag files or folder to left panel",
+    "panHint": "Drag to pan, scroll to zoom",
+    "packing": "Packing...",
+    "rendering": "Rendering...",
+    "previewAnimation": "Preview Animation",
+    "sizeSettings": "Size Settings",
+    "layoutSettings": "Layout Settings",
+    "outputSettings": "Output Settings",
+    "resultInfo": "Atlas Info",
+    "animationPreview": "Animation Preview",
+    "animationDescription": "Preview sprite sequence animation",
+    "frame": "Frame",
+    "fps": "FPS",
+    "spriteSize": "Sprite Size",
+    "totalFrames": "Total Frames",
+    "duration": "Duration",
+    "advancedSettings": "Advanced Settings",
+    "multiAtlasHint": "When enabled, sprites that exceed the max size will be packed into multiple atlases",
+    "unpackedCount": "{{count}} sprites could not fit",
+    "unpackedSuggestion": "Try increasing max size or enable multi-atlas mode",
+    "unpackedWarning": "{{count}} sprites could not fit in the atlas",
+    "unpackedHint": "Try increasing max size or enable multi-atlas mode",
+    "atlasCount": "Atlas Count",
+    "atlasIndex": "Atlas {{current}} / {{total}}",
+    "currentAtlas": "Current Atlas #{{index}}",
+    "downloadAllAtlases": "Download All ({{count}} atlases)",
+    "compressionSettings": "Compression",
+    "compressionHint": "Enable PNG quantization to significantly reduce file size (similar to TinyPNG)"
+  },
+  "footer": {
+    "tagline": "Media processing tools for game developers. Extract frames, compress images, optimize audio.",
+    "note": "Inspired by modern product storytelling—centered on your workflow, not UI noise.",
+    "sections": {
+      "tools": "Tools",
+      "company": "Product"
+    },
+    "links": {
+      "home": "Home"
+    },
+    "copyright": "All rights reserved"
+  }
+}

src/locales/zh.json

@@ -0,0 +1,394 @@
+{
+  "common": {
+    "appName": "KYMR",
+    "loading": "加载中...",
+    "save": "保存",
+    "cancel": "取消",
+    "delete": "删除",
+    "edit": "编辑",
+    "close": "关闭",
+    "confirm": "确认",
+    "back": "返回",
+    "next": "下一步",
+    "download": "下载",
+    "share": "分享",
+    "reset": "重置",
+    "submit": "提交",
+    "tryNow": "立即尝试",
+    "learnMore": "了解更多",
+    "getStarted": "开始使用",
+    "startBuilding": "开始创作",
+    "signIn": "登录",
+    "register": "注册",
+    "features": "功能",
+    "settings": "设置",
+    "toggleMenu": "切换菜单",
+    "processing": "处理中...",
+    "uploading": "上传中...",
+    "completed": "已完成！",
+    "failed": "失败",
+    "ready": "准备处理",
+    "file": "文件",
+    "files": "文件",
+    "yes": "是",
+    "no": "否",
+    "on": "开启",
+    "off": "关闭"
+  },
+  "nav": {
+    "tools": "工具",
+    "docs": "文档",
+    "about": "关于",
+    "dashboard": "仪表盘",
+    "overview": "概览"
+  },
+  "home": {
+    "hero": {
+      "kicker": "为素材准备提速",
+      "title": "为小游戏开发提供全链路提效赋能",
+      "description": "视频抽帧、图片压缩、音频优化。一站式游戏素材处理工具，让开发更高效。",
+      "startBuilding": "开始创作",
+      "secondaryCta": "了解工具",
+      "note": "无需安装插件。打开即用。",
+      "previewTitle": "素材处理工作台",
+      "stats": {
+        "developers": "开发者",
+        "filesProcessed": "文件处理量",
+        "uptime": "正常运行时间"
+      }
+    },
+    "featuresSection": {
+      "title": "您需要的一切",
+      "description": "专为游戏开发者设计的强大工具"
+    },
+    "showcase": {
+      "kicker": "三件事，刚好够用",
+      "title": "把素材准备变成一条顺畅的流水线",
+      "description": "每个工具只保留最关键的控制项：更少打断，更快出结果。",
+      "cta": "打开工具"
+    },
+    "workflow": {
+      "title": "像写代码一样处理素材",
+      "description": "清晰、可预期、可复用。把“试试”变成“稳定产出”。",
+      "steps": {
+        "step1": {
+          "title": "拖进来",
+          "description": "支持批量文件。把要处理的素材直接丢进页面。"
+        },
+        "step2": {
+          "title": "调到刚好",
+          "description": "只给你真正需要的参数：质量、帧率、格式。"
+        },
+        "step3": {
+          "title": "拿走结果",
+          "description": "输出结构清晰，便于集成到美术/工程流程。"
+        }
+      }
+    },
+    "quality": {
+      "title": "快、稳、讲究",
+      "description": "不是花哨的功能堆叠，而是每一次点击都更顺手。",
+      "items": {
+        "fast": {
+          "title": "极速处理",
+          "description": "高频操作更快完成，把等待时间还给创作。"
+        },
+        "private": {
+          "title": "安全私密",
+          "description": "文件处理遵循最小化原则，减少不必要的暴露。"
+        },
+        "designed": {
+          "title": "为开发者打造",
+          "description": "简洁的信息架构与可复制的操作节奏，降低学习成本。"
+        }
+      }
+    },
+    "final": {
+      "title": "现在就开始，把时间留给游戏本身",
+      "description": "选一个工具，从第一份素材开始建立你的高效流程。",
+      "primaryCta": "立即开始",
+      "secondaryCta": "先试试抽帧"
+    },
+    "tools": {
+      "videoToFrames": {
+        "title": "视频抽帧",
+        "description": "从视频中提取帧，可自定义帧率。非常适合精灵动画制作。"
+      },
+      "imageCompression": {
+        "title": "图片压缩",
+        "description": "为网页和移动端优化图片，不影响质量。支持批量处理。"
+      },
+      "audioCompression": {
+        "title": "音频压缩",
+        "description": "压缩并转换音频文件为多种格式。调整比特率和采样率。"
+      },
+      "textureAtlas": {
+        "title": "合图工具",
+        "description": "将多张精灵图合并为优化的纹理图集。提升游戏性能的利器。"
+      },
+      "aiTools": {
+        "title": "更多工具",
+        "description": "更多游戏开发实用工具，敬请期待。"
+      }
+    },
+    "benefits": {
+      "title": "为什么选择 KYMR？",
+      "description": "我们了解游戏开发的独特挑战。我们的工具帮助您更快速、更智能地工作。",
+      "lightningFast": {
+        "title": "极速处理",
+        "description": "通过优化的基础设施，在几秒钟内处理文件。"
+      },
+      "secure": {
+        "title": "安全私密",
+        "description": "您的文件将被加密，处理完成后自动删除。"
+      },
+      "forDevelopers": {
+        "title": "专为开发者打造",
+        "description": "API 访问、批量处理，以及专为游戏开发工作流程设计的工具。"
+      }
+    },
+    "cta": {
+      "title": "准备好升级了吗？",
+      "description": "加入数千名使用我们工具开发精彩游戏的开发者。",
+      "getStarted": "开始创作"
+    }
+  },
+  "sidebar": {
+    "tools": "工具",
+    "aiTools": "更多工具",
+    "videoToFrames": "视频抽帧",
+    "imageCompression": "图片压缩",
+    "audioCompression": "音频压缩",
+    "textureAtlas": "合图工具",
+    "aiImage": "AI 图片",
+    "aiAudio": "AI 音频"
+  },
+  "uploader": {
+    "dropFiles": "拖拽文件到这里",
+    "dropActive": "释放文件即可上传",
+    "fileRejected": "不支持的文件类型",
+    "browseFiles": "或点击选择文件 • 最大 {{maxSize}} • 最多 {{maxFiles}} 个{{file}}",
+    "file_one": "文件",
+    "file_other": "文件"
+  },
+  "progress": {
+    "status": {
+      "idle": "准备处理",
+      "uploading": "上传中...",
+      "processing": "处理中...",
+      "completed": "已完成！",
+      "failed": "失败"
+    }
+  },
+  "config": {
+    "imageCompression": {
+      "title": "压缩设置",
+      "description": "配置压缩选项",
+      "quality": "压缩质量",
+      "qualityDescription": "质量越低 = 文件越小",
+      "format": "输出格式",
+      "formatDescription": "转换为其他格式（可选）",
+      "formatOriginal": "原始",
+      "formatAuto": "自动（最佳）",
+      "formatJpeg": "JPEG",
+      "formatPng": "PNG",
+      "formatWebp": "WebP",
+      "formatAvif": "AVIF"
+    },
+    "videoFrames": {
+      "title": "导出设置",
+      "description": "配置帧提取方式",
+      "fps": "帧率",
+      "fpsDescription": "每秒提取的帧数",
+      "format": "输出格式",
+      "formatDescription": "提取帧的图片格式",
+      "quality": "质量",
+      "qualityDescription": "图片质量（适用于 JPEG 和 WebP）"
+    },
+    "audioCompression": {
+      "title": "音频设置",
+      "description": "配置压缩参数",
+      "bitrate": "比特率",
+      "bitrateDescription": "比特率越高 = 质量越好，文件越大",
+      "format": "输出格式",
+      "formatDescription": "目标音频格式",
+      "sampleRate": "采样率",
+      "sampleRateDescription": "音频采样率（Hz）",
+      "channels": "声道",
+      "channelsDescription": "音频声道",
+      "stereo": "立体声（2 声道）",
+      "mono": "单声道（1 声道）"
+    },
+    "textureAtlas": {
+      "title": "合图设置",
+      "description": "配置纹理图集生成选项",
+      "maxWidth": "最大宽度",
+      "maxWidthDescription": "图集的最大宽度（像素）",
+      "maxHeight": "最大高度",
+      "maxHeightDescription": "图集的最大高度（像素）",
+      "padding": "内边距",
+      "paddingDescription": "精灵之间的间距（防止溢出）",
+      "allowRotation": "允许旋转",
+      "allowRotationDescription": "旋转精灵以提高打包效率",
+      "pot": "2 的幂次",
+      "potDescription": "使用 2 的幂次尺寸（512、1024、2048 等）",
+      "format": "图片格式",
+      "formatDescription": "输出图片格式",
+      "quality": "质量",
+      "qualityDescription": "WebP 格式的压缩质量",
+      "outputFormat": "数据格式",
+      "outputFormatDescription": "精灵元数据的格式",
+      "algorithm": "打包算法",
+      "algorithmDescription": "排列精灵的算法",
+      "formatPng": "PNG（无损）",
+      "formatWebp": "WebP（压缩）",
+      "outputCocos2d": "Cocos2d plist",
+      "outputCocosCreator": "Cocos Creator JSON",
+      "outputGeneric": "通用 JSON",
+      "algorithmMaxRects": "MaxRects（最优）",
+      "algorithmShelf": "Shelf（快速）",
+      "multiAtlas": "多图打包",
+      "multiAtlasDescription": "超出尺寸的精灵自动打包到多张图片",
+      "compression": "PNG 压缩",
+      "compressionDescription": "使用量化算法压缩 PNG 图片"
+    }
+  },
+  "tools": {
+    "imageCompression": {
+      "title": "图片压缩",
+      "description": "世界一流的图片压缩，智能优化",
+      "compressImages": "压缩图片",
+      "features": "功能特点",
+      "featureList": [
+        "智能压缩 - 保证输出更小或返回原图",
+        "多策略优化 - 尝试多种算法找到最佳结果",
+        "自动格式选择 - 智能选择最适合的格式",
+        "MozJPEG & WebP - 业界领先的压缩算法",
+        "元数据剥离 - 自动移除 EXIF 等冗余数据",
+        "批量处理 - 一次压缩多张图片"
+      ]
+    },
+    "videoFrames": {
+      "title": "视频抽帧",
+      "description": "从视频中提取帧，可自定义设置",
+      "processVideo": "处理视频",
+      "howItWorks": "工作原理",
+      "steps": [
+        "上传视频文件（MP4、MOV、AVI 等）",
+        "配置帧率、格式和质量",
+        "点击「处理视频」开始提取",
+        "下载包含所有帧的 ZIP 文件"
+      ]
+    },
+    "audioCompression": {
+      "title": "音频压缩",
+      "description": "压缩并转换音频文件，可控质量",
+      "compressAudio": "压缩音频",
+      "supportedFormats": "支持的格式",
+      "input": "输入",
+      "output": "输出",
+      "inputFormats": "MP3、WAV、OGG、AAC、FLAC、M4A",
+      "outputFormats": "MP3、AAC、OGG、FLAC"
+    },
+    "textureAtlas": {
+      "title": "合图工具",
+      "description": "将多张图片合并为一个纹理图集，专为游戏开发优化",
+      "createAtlas": "创建合图",
+      "features": "功能特点",
+      "featureList": [
+        "智能打包 - MaxRects 算法实现最优空间利用",
+        "Cocos Creator 兼容 - 导出 plist/JSON 格式",
+        "旋转支持 - 可旋转精灵以提高打包效率",
+        "2 的幂次 - 自动 POT 尺寸提升兼容性"
+      ],
+      "downloadAll": "打包下载",
+      "downloadImage": "下载图片",
+      "downloadData": "下载数据",
+      "dimensions": "尺寸",
+      "sprites": "精灵数",
+      "imageFormat": "图片格式",
+      "dataFormat": "数据格式"
+    }
+  },
+  "processing": {
+    "uploadingImages": "上传图片中...",
+    "compressingImages": "压缩图片中...",
+    "uploadingVideo": "上传视频中...",
+    "extractingFrames": "提取帧中...",
+    "uploadingAudio": "上传音频中...",
+    "compressingAudio": "压缩音频中...",
+    "uploadingSprites": "上传精灵图中...",
+    "creatingAtlas": "创建合图中...",
+    "compressionComplete": "压缩完成！",
+    "processingComplete": "处理完成！",
+    "atlasComplete": "合图创建成功！",
+    "compressionFailed": "压缩失败",
+    "processingFailed": "处理失败",
+    "unknownError": "未知错误",
+    "uploadProgress": "上传中... {{progress}}%",
+    "compressProgress": "压缩中... {{progress}}%",
+    "processProgress": "处理中... {{progress}}%"
+  },
+  "results": {
+    "processingComplete": "处理完成",
+    "filesReady": "{{count}} 个{{file}}可下载",
+    "file_one": "文件",
+    "file_other": "文件",
+    "saved": "节省 {{ratio}}%"
+  },
+  "preview": {
+    "title": "图片对比",
+    "original": "原图",
+    "compressed": "压缩后",
+    "dragHint": "拖动滑块或点击来对比",
+    "filename": "文件名"
+  },
+  "atlas": {
+    "dropSprites": "拖拽精灵图到这里",
+    "supportFolder": "支持拖拽文件夹上传",
+    "selectFiles": "选择文件",
+    "selectFolder": "选择文件夹",
+    "preview": "预览",
+    "emptyPreview": "上传精灵图后预览合图效果",
+    "dragHint": "拖拽文件或文件夹到左侧面板",
+    "panHint": "拖拽平移，滚轮缩放",
+    "packing": "打包中...",
+    "rendering": "渲染中...",
+    "previewAnimation": "预览动画",
+    "sizeSettings": "尺寸设置",
+    "layoutSettings": "布局设置",
+    "outputSettings": "输出设置",
+    "resultInfo": "合图信息",
+    "animationPreview": "动画预览",
+    "animationDescription": "预览精灵序列帧动画效果",
+    "frame": "帧",
+    "fps": "帧率",
+    "spriteSize": "精灵尺寸",
+    "totalFrames": "总帧数",
+    "duration": "时长",
+    "advancedSettings": "高级设置",
+    "multiAtlasHint": "开启后，超出单张合图尺寸的精灵将自动打包到多张图片中",
+    "unpackedCount": "有 {{count}} 张图片未能放入",
+    "unpackedSuggestion": "建议增大最大尺寸，或开启多图打包功能",
+    "unpackedWarning": "{{count}} 张精灵图未能放入合图",
+    "unpackedHint": "请增大最大尺寸，或开启多图打包功能",
+    "atlasCount": "合图数量",
+    "atlasIndex": "合图 {{current}} / {{total}}",
+    "currentAtlas": "当前合图 #{{index}}",
+    "downloadAllAtlases": "打包下载全部 ({{count}} 张)",
+    "compressionSettings": "压缩设置",
+    "compressionHint": "开启后使用 PNG 量化压缩，可大幅减小文件体积（类似 TinyPNG）"
+  },
+  "footer": {
+    "tagline": "面向游戏开发者的媒体处理工具。视频抽帧、图片压缩、音频优化。",
+    "note": "灵感来自现代产品网站的信息密度与克制动效，但以你自己的产品为中心。",
+    "sections": {
+      "tools": "工具",
+      "company": "产品"
+    },
+    "links": {
+      "home": "首页"
+    },
+    "copyright": "保留所有权利"
+  }
+}

src/store/atlasStore.ts

@@ -0,0 +1,293 @@
+import { create } from "zustand";
+import type { TextureAtlasConfig, AtlasFrame } from "@/types";
+import type { PackerPlacement } from "@/lib/atlas-packer";
+
+/**
+ * Browser-side sprite with ImageBitmap
+ */
+export interface BrowserSprite {
+  id: string;
+  name: string;
+  width: number;
+  height: number;
+  image: ImageBitmap;
+  file: File;
+}
+
+/**
+ * Single atlas result
+ */
+export interface SingleAtlasResult {
+  index: number;
+  width: number;
+  height: number;
+  placements: PackerPlacement[];
+  frames: AtlasFrame[];
+  imageDataUrl: string | null;
+  /** Sprite IDs in this atlas */
+  spriteIds: string[];
+}
+
+/**
+ * Complete atlas result (supports multiple atlases)
+ */
+export interface AtlasResult {
+  /** All atlases */
+  atlases: SingleAtlasResult[];
+  /** Total number of packed sprites */
+  packedCount: number;
+  /** Sprites that couldn't fit in any atlas (only when multi-atlas is disabled) */
+  unpackedSpriteIds: string[];
+}
+
+/**
+ * Legacy single result format for backward compatibility
+ */
+export interface LegacyAtlasResult {
+  width: number;
+  height: number;
+  placements: PackerPlacement[];
+  frames: AtlasFrame[];
+  imageDataUrl: string | null;
+  unpackedSpriteIds: string[];
+}
+
+/**
+ * Processing status
+ */
+export type AtlasProcessStatus = "idle" | "loading" | "packing" | "rendering" | "completed" | "error";
+
+/**
+ * Atlas Store State
+ */
+interface AtlasState {
+  // Sprite data
+  sprites: BrowserSprite[];
+  folderName: string;
+  
+  // Configuration
+  config: TextureAtlasConfig;
+  
+  // Multi-atlas mode
+  enableMultiAtlas: boolean;
+  
+  // Compression mode (PNG quantization)
+  enableCompression: boolean;
+  
+  // Processing state
+  status: AtlasProcessStatus;
+  progress: number;
+  errorMessage: string | null;
+  
+  // Result (supports multiple atlases)
+  result: AtlasResult | null;
+  
+  // Current preview atlas index
+  currentAtlasIndex: number;
+  
+  // Preview state
+  previewScale: number;
+  previewOffset: { x: number; y: number };
+  selectedSpriteIds: string[];
+  
+  // Animation preview
+  isAnimationDialogOpen: boolean;
+  animationFps: number;
+  
+  // Actions
+  addSprites: (sprites: BrowserSprite[]) => void;
+  removeSprite: (id: string) => void;
+  clearSprites: () => void;
+  setFolderName: (name: string) => void;
+  
+  updateConfig: (config: Partial<TextureAtlasConfig>) => void;
+  resetConfig: () => void;
+  
+  setEnableMultiAtlas: (enable: boolean) => void;
+  setEnableCompression: (enable: boolean) => void;
+  
+  setStatus: (status: AtlasProcessStatus) => void;
+  setProgress: (progress: number) => void;
+  setError: (message: string | null) => void;
+  
+  setResult: (result: AtlasResult | null) => void;
+  setCurrentAtlasIndex: (index: number) => void;
+  
+  setPreviewScale: (scale: number) => void;
+  setPreviewOffset: (offset: { x: number; y: number }) => void;
+  selectSprite: (id: string, multi?: boolean) => void;
+  deselectAllSprites: () => void;
+  
+  openAnimationDialog: () => void;
+  closeAnimationDialog: () => void;
+  setAnimationFps: (fps: number) => void;
+  
+  // Computed helpers
+  getCurrentAtlas: () => SingleAtlasResult | null;
+}
+
+/**
+ * Default texture atlas configuration
+ */
+const defaultConfig: TextureAtlasConfig = {
+  maxWidth: 1024,
+  maxHeight: 1024,
+  padding: 2,
+  allowRotation: false,
+  pot: false,
+  format: "png",
+  quality: 90,
+  outputFormat: "cocos2d",
+  algorithm: "MaxRects",
+};
+
+/**
+ * Atlas Store
+ */
+export const useAtlasStore = create<AtlasState>((set, get) => ({
+  // Initial state
+  sprites: [],
+  folderName: "",
+  config: { ...defaultConfig },
+  enableMultiAtlas: false,
+  enableCompression: false,
+  status: "idle",
+  progress: 0,
+  errorMessage: null,
+  result: null,
+  currentAtlasIndex: 0,
+  previewScale: 1,
+  previewOffset: { x: 0, y: 0 },
+  selectedSpriteIds: [],
+  isAnimationDialogOpen: false,
+  animationFps: 12,
+
+  // Sprite actions
+  addSprites: (newSprites) => {
+    set((state) => {
+      // Filter out duplicates by name
+      const existingNames = new Set(state.sprites.map((s) => s.name));
+      const uniqueSprites = newSprites.filter((s) => !existingNames.has(s.name));
+      
+      // Sort by name (natural sort for frame sequences)
+      const allSprites = [...state.sprites, ...uniqueSprites].sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" })
+      );
+      
+      return { sprites: allSprites, result: null, currentAtlasIndex: 0 };
+    });
+  },
+
+  removeSprite: (id) => {
+    set((state) => ({
+      sprites: state.sprites.filter((s) => s.id !== id),
+      selectedSpriteIds: state.selectedSpriteIds.filter((sid) => sid !== id),
+      result: null,
+      currentAtlasIndex: 0,
+    }));
+  },
+
+  clearSprites: () => {
+    // Release ImageBitmap resources
+    const { sprites } = get();
+    sprites.forEach((s) => s.image.close());
+    
+    set({
+      sprites: [],
+      folderName: "",
+      result: null,
+      currentAtlasIndex: 0,
+      selectedSpriteIds: [],
+      status: "idle",
+      progress: 0,
+      errorMessage: null,
+    });
+  },
+
+  setFolderName: (name) => set({ folderName: name }),
+
+  // Config actions
+  updateConfig: (partialConfig) => {
+    set((state) => ({
+      config: { ...state.config, ...partialConfig },
+      result: null, // Clear result when config changes
+      currentAtlasIndex: 0,
+    }));
+  },
+
+  resetConfig: () => set({ config: { ...defaultConfig }, result: null, currentAtlasIndex: 0 }),
+
+  // Multi-atlas mode
+  setEnableMultiAtlas: (enable) => set({ enableMultiAtlas: enable, result: null, currentAtlasIndex: 0 }),
+
+  // Compression mode (only affects download, not preview)
+  setEnableCompression: (enable) => set({ enableCompression: enable }),
+
+  // Status actions
+  setStatus: (status) => set({ status }),
+  setProgress: (progress) => set({ progress }),
+  setError: (message) => set({ errorMessage: message, status: message ? "error" : "idle" }),
+
+  // Result actions
+  setResult: (result) => set({ result, status: result ? "completed" : "idle", currentAtlasIndex: 0 }),
+  
+  setCurrentAtlasIndex: (index) => {
+    const { result } = get();
+    if (result && index >= 0 && index < result.atlases.length) {
+      set({ currentAtlasIndex: index, previewOffset: { x: 0, y: 0 } });
+    }
+  },
+
+  // Preview actions
+  setPreviewScale: (scale) => set({ previewScale: Math.max(0.1, Math.min(4, scale)) }),
+  
+  setPreviewOffset: (offset) => set({ previewOffset: offset }),
+  
+  selectSprite: (id, multi = false) => {
+    set((state) => {
+      if (multi) {
+        const isSelected = state.selectedSpriteIds.includes(id);
+        return {
+          selectedSpriteIds: isSelected
+            ? state.selectedSpriteIds.filter((sid) => sid !== id)
+            : [...state.selectedSpriteIds, id],
+        };
+      }
+      return { selectedSpriteIds: id ? [id] : [] };
+    });
+  },
+  
+  deselectAllSprites: () => set({ selectedSpriteIds: [] }),
+
+  // Animation dialog actions
+  openAnimationDialog: () => set({ isAnimationDialogOpen: true }),
+  closeAnimationDialog: () => set({ isAnimationDialogOpen: false }),
+  setAnimationFps: (fps) => set({ animationFps: Math.max(1, Math.min(60, fps)) }),
+  
+  // Computed helpers
+  getCurrentAtlas: () => {
+    const { result, currentAtlasIndex } = get();
+    if (!result || result.atlases.length === 0) return null;
+    return result.atlases[currentAtlasIndex] || null;
+  },
+}));
+
+/**
+ * Selector hooks for optimized re-renders
+ */
+export const useAtlasSprites = () => useAtlasStore((state) => state.sprites);
+export const useAtlasConfig = () => useAtlasStore((state) => state.config);
+export const useAtlasResult = () => useAtlasStore((state) => state.result);
+export const useAtlasStatus = () => useAtlasStore((state) => ({
+  status: state.status,
+  progress: state.progress,
+  errorMessage: state.errorMessage,
+}));
+export const useAtlasPreview = () => useAtlasStore((state) => ({
+  scale: state.previewScale,
+  offset: state.previewOffset,
+}));
+export const useCurrentAtlas = () => useAtlasStore((state) => {
+  if (!state.result || state.result.atlases.length === 0) return null;
+  return state.result.atlases[state.currentAtlasIndex] || null;
+});

src/types/index.ts

@@ -35,6 +35,9 @@ export interface ProcessMetadata {
   duration?: number;
   frames?: number;
   compressionRatio?: number;
+  originalSize?: number;
+  compressedSize?: number;
+  filename?: string;
 }
 
 export interface ProcessingResult {
@@ -56,7 +59,7 @@ export interface ProcessingProgress {
  * Tool types
  */
 
-export type ToolType = "video-frames" | "image-compress" | "audio-compress" | "ai-image" | "ai-audio";
+export type ToolType = "video-frames" | "image-compress" | "audio-compress" | "texture-atlas" | "ai-image" | "ai-audio";
 
 export interface ToolConfig {
   type: ToolType;
@@ -126,7 +129,7 @@ export interface VideoFramesConfig {
 
 export interface ImageCompressConfig {
   quality: number;
-  format: "original" | "jpeg" | "png" | "webp";
+  format: "original" | "auto" | "jpeg" | "png" | "webp" | "avif";
   resize?: {
     width?: number;
     height?: number;
@@ -140,3 +143,52 @@ export interface AudioCompressConfig {
   sampleRate: number;
   channels: number;
 }
+
+/**
+ * Texture Atlas types
+ */
+
+export interface TextureAtlasConfig {
+  maxWidth: number;
+  maxHeight: number;
+  padding: number;
+  allowRotation: boolean;
+  pot: boolean; // Power of Two
+  format: "png" | "webp";
+  quality: number;
+  outputFormat: "cocos2d" | "cocos-creator" | "generic-json";
+  algorithm: "MaxRects" | "Shelf";
+}
+
+export interface AtlasSprite {
+  id: string;
+  name: string;
+  width: number;
+  height: number;
+  buffer: Buffer;
+}
+
+export interface AtlasRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotated?: boolean;
+}
+
+export interface AtlasFrame {
+  filename: string;
+  frame: AtlasRect;
+  rotated: boolean;
+  trimmed: boolean;
+  spriteSourceSize: { x: number; y: number; w: number; h: number };
+  sourceSize: { w: number; h: number };
+}
+
+export interface TextureAtlasResult {
+  width: number;
+  height: number;
+  image: Buffer;
+  frames: AtlasFrame[];
+  format: string;
+}

src/types/upng-js.d.ts

@@ -0,0 +1,54 @@
+declare module "upng-js" {
+  /**
+   * Encode RGBA image data to PNG
+   * @param imgs Array of ArrayBuffer containing RGBA data
+   * @param w Width of the image
+   * @param h Height of the image
+   * @param cnum Number of colors (0 = lossless, 256 = 8-bit quantization)
+   * @param dels Optional delays for APNG frames
+   * @returns ArrayBuffer containing PNG data
+   */
+  export function encode(
+    imgs: ArrayBuffer[],
+    w: number,
+    h: number,
+    cnum: number,
+    dels?: number[]
+  ): ArrayBuffer;
+
+  /**
+   * Decode PNG to RGBA image data
+   * @param buffer PNG data
+   * @returns Decoded image info
+   */
+  export function decode(buffer: ArrayBuffer): {
+    width: number;
+    height: number;
+    depth: number;
+    ctype: number;
+    frames: Array<{
+      rect: { x: number; y: number; width: number; height: number };
+      delay: number;
+      dispose: number;
+      blend: number;
+    }>;
+    tabs: Record<string, unknown>;
+    data: Uint8Array;
+  };
+
+  /**
+   * Convert decoded PNG to RGBA format
+   * @param img Decoded image from decode()
+   * @param frameIndex Frame index for APNG (default 0)
+   * @returns Uint8Array of RGBA data
+   */
+  export function toRGBA8(img: ReturnType<typeof decode>, frameIndex?: number): Uint8Array[];
+
+  const UPNG: {
+    encode: typeof encode;
+    decode: typeof decode;
+    toRGBA8: typeof toRGBA8;
+  };
+
+  export default UPNG;
+}