Merge branch 'main' of https://git.atdunbg.xyz/Super_Z/echo-nexus

# Conflicts:
#	.gitignore

.env

@@ -0,0 +1 @@
+DATABASE_URL=file:/home/z/my-project/db/custom.db

.gitignore

@@ -136,3 +136,13 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+
+# Echo Nexus 本地文件
+local-*
+.claude
+.z-ai-config
+dev.log
+dev.out.log
+*.tsbuildinfo
+next-env.d.ts
+.vercel

.zscripts/build.sh

@@ -0,0 +1,122 @@
+#!/bin/bash
+
+# 将 stderr 重定向到 stdout，避免 execute_command 因为 stderr 输出而报错
+exec 2>&1
+
+set -e
+
+# 获取脚本所在目录（.zscripts 目录，即 workspace-agent/.zscripts）
+# 使用 $0 获取脚本路径（兼容 sh 和 bash）
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+
+# Next.js 项目路径
+NEXTJS_PROJECT_DIR="/home/z/my-project"
+
+# 检查 Next.js 项目目录是否存在
+if [ ! -d "$NEXTJS_PROJECT_DIR" ]; then
+    echo "❌ 错误: Next.js 项目目录不存在: $NEXTJS_PROJECT_DIR"
+    exit 1
+fi
+
+echo "🚀 开始构建 Next.js 应用和 mini-services..."
+echo "📁 Next.js 项目路径: $NEXTJS_PROJECT_DIR"
+
+# 切换到 Next.js 项目目录
+cd "$NEXTJS_PROJECT_DIR" || exit 1
+
+# 设置环境变量
+export NEXT_TELEMETRY_DISABLED=1
+
+BUILD_DIR="/tmp/build_fullstack_$BUILD_ID"
+echo "📁 清理并创建构建目录: $BUILD_DIR"
+mkdir -p "$BUILD_DIR"
+
+# 安装依赖
+echo "📦 安装依赖..."
+bun install
+
+# 构建 Next.js 应用
+echo "🔨 构建 Next.js 应用..."
+bun run build
+
+# 构建 mini-services
+# 检查 Next.js 项目目录下是否有 mini-services 目录
+if [ -d "$NEXTJS_PROJECT_DIR/mini-services" ]; then
+    echo "🔨 构建 mini-services..."
+    # 使用 workspace-agent 目录下的 mini-services 脚本
+    sh "$SCRIPT_DIR/mini-services-install.sh"
+    sh "$SCRIPT_DIR/mini-services-build.sh"
+
+    # 复制 mini-services-start.sh 到 mini-services-dist 目录
+    echo "  - 复制 mini-services-start.sh 到 $BUILD_DIR"
+    cp "$SCRIPT_DIR/mini-services-start.sh" "$BUILD_DIR/mini-services-start.sh"
+    chmod +x "$BUILD_DIR/mini-services-start.sh"
+else
+    echo "ℹ️  mini-services 目录不存在，跳过"
+fi
+
+# 将所有构建产物复制到临时构建目录
+echo "📦 收集构建产物到 $BUILD_DIR..."
+
+# 复制 Next.js standalone 构建输出
+if [ -d ".next/standalone" ]; then
+    echo "  - 复制 .next/standalone"
+    cp -r .next/standalone "$BUILD_DIR/next-service-dist/"
+fi
+
+# 复制 Next.js 静态文件
+if [ -d ".next/static" ]; then
+    echo "  - 复制 .next/static"
+    mkdir -p "$BUILD_DIR/next-service-dist/.next"
+    cp -r .next/static "$BUILD_DIR/next-service-dist/.next/"
+fi
+
+# 复制 public 目录
+if [ -d "public" ]; then
+    echo "  - 复制 public"
+    cp -r public "$BUILD_DIR/next-service-dist/"
+fi
+
+# 将测试环境数据库复制到构建产物中，生产环境直接使用这份数据库
+if [ -f "./db/custom.db" ]; then
+    echo "🗄️  复制测试环境数据库到构建产物..."
+    mkdir -p "$BUILD_DIR/db"
+    cp -r ./db/. "$BUILD_DIR/db/"
+
+    echo "🗄️  同步构建产物中的数据库结构..."
+    DATABASE_URL="file:$BUILD_DIR/db/custom.db" bun run db:push
+    echo "✅ 构建产物数据库已准备完成"
+    ls -lah "$BUILD_DIR/db"
+else
+    echo "❌ 未找到测试环境数据库文件 ./db/custom.db，无法继续构建生产包"
+    exit 1
+fi
+
+# 复制 Caddyfile（如果存在）
+if [ -f "Caddyfile" ]; then
+    echo "  - 复制 Caddyfile"
+    cp Caddyfile "$BUILD_DIR/"
+else
+    echo "ℹ️  Caddyfile 不存在，跳过"
+fi
+
+# 复制 start.sh 脚本
+echo "  - 复制 start.sh 到 $BUILD_DIR"
+cp "$SCRIPT_DIR/start.sh" "$BUILD_DIR/start.sh"
+chmod +x "$BUILD_DIR/start.sh"
+
+# 打包到 $BUILD_DIR.tar.gz
+PACKAGE_FILE="${BUILD_DIR}.tar.gz"
+echo ""
+echo "📦 打包构建产物到 $PACKAGE_FILE..."
+cd "$BUILD_DIR" || exit 1
+tar -czf "$PACKAGE_FILE" .
+cd - > /dev/null || exit 1
+
+# # 清理临时目录
+# rm -rf "$BUILD_DIR"
+
+echo ""
+echo "✅ 构建完成！所有产物已打包到 $PACKAGE_FILE"
+echo "📊 打包文件大小:"
+ls -lh "$PACKAGE_FILE"

.zscripts/dev.pid

@@ -0,0 +1 @@
+959

.zscripts/dev.sh

@@ -0,0 +1,154 @@
+#!/bin/bash
+
+set -euo pipefail
+
+# 获取脚本所在目录（.zscripts）
+# 使用 $0 获取脚本路径（与 build.sh 保持一致）
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+log_step_start() {
+	local step_name="$1"
+	echo "=========================================="
+	echo "[$(date '+%Y-%m-%d %H:%M:%S')] Starting: $step_name"
+	echo "=========================================="
+	export STEP_START_TIME
+	STEP_START_TIME=$(date +%s)
+}
+
+log_step_end() {
+	local step_name="${1:-Unknown step}"
+	local end_time
+	end_time=$(date +%s)
+	local duration=$((end_time - STEP_START_TIME))
+	echo "=========================================="
+	echo "[$(date '+%Y-%m-%d %H:%M:%S')] Completed: $step_name"
+	echo "[LOG] Step: $step_name | Duration: ${duration}s"
+	echo "=========================================="
+	echo ""
+}
+
+start_mini_services() {
+	local mini_services_dir="$PROJECT_DIR/mini-services"
+	local started_count=0
+
+	log_step_start "Starting mini-services"
+	if [ ! -d "$mini_services_dir" ]; then
+		echo "Mini-services directory not found, skipping..."
+		log_step_end "Starting mini-services"
+		return 0
+	fi
+
+	echo "Found mini-services directory, scanning for sub-services..."
+
+	for service_dir in "$mini_services_dir"/*; do
+		if [ ! -d "$service_dir" ]; then
+			continue
+		fi
+
+		local service_name
+		service_name=$(basename "$service_dir")
+		echo "Checking service: $service_name"
+
+		if [ ! -f "$service_dir/package.json" ]; then
+			echo "[$service_name] No package.json found, skipping..."
+			continue
+		fi
+
+		if ! grep -q '"dev"' "$service_dir/package.json"; then
+			echo "[$service_name] No dev script found, skipping..."
+			continue
+		fi
+
+		echo "Starting $service_name in background..."
+		(
+			cd "$service_dir"
+			echo "[$service_name] Installing dependencies..."
+			bun install
+			echo "[$service_name] Running bun run dev..."
+			exec bun run dev
+		) >"$PROJECT_DIR/.zscripts/mini-service-${service_name}.log" 2>&1 &
+
+		local service_pid=$!
+		echo "[$service_name] Started in background (PID: $service_pid)"
+		echo "[$service_name] Log: $PROJECT_DIR/.zscripts/mini-service-${service_name}.log"
+		disown "$service_pid" 2>/dev/null || true
+		started_count=$((started_count + 1))
+	done
+
+	echo "Mini-services startup completed. Started $started_count service(s)."
+	log_step_end "Starting mini-services"
+}
+
+wait_for_service() {
+	local host="$1"
+	local port="$2"
+	local service_name="$3"
+	local max_attempts="${4:-60}"
+	local attempt=1
+
+	echo "Waiting for $service_name to be ready on $host:$port..."
+
+	while [ "$attempt" -le "$max_attempts" ]; do
+		if curl -s --connect-timeout 2 --max-time 5 "http://$host:$port" >/dev/null 2>&1; then
+			echo "$service_name is ready!"
+			return 0
+		fi
+
+		echo "Attempt $attempt/$max_attempts: $service_name not ready yet, waiting..."
+		sleep 1
+		attempt=$((attempt + 1))
+	done
+
+	echo "ERROR: $service_name failed to start within $max_attempts seconds"
+	return 1
+}
+
+cleanup() {
+	if [ -n "${DEV_PID:-}" ] && kill -0 "$DEV_PID" >/dev/null 2>&1; then
+		echo "Stopping Next.js dev server (PID: $DEV_PID)..."
+		kill "$DEV_PID" >/dev/null 2>&1 || true
+	fi
+}
+
+trap cleanup EXIT INT TERM
+
+cd "$PROJECT_DIR"
+
+if ! command -v bun >/dev/null 2>&1; then
+	echo "ERROR: bun is not installed or not in PATH"
+	exit 1
+fi
+
+log_step_start "bun install"
+echo "[BUN] Installing dependencies..."
+bun install
+log_step_end "bun install"
+
+log_step_start "bun run db:push"
+echo "[BUN] Setting up database..."
+bun run db:push
+log_step_end "bun run db:push"
+
+log_step_start "Starting Next.js dev server"
+echo "[BUN] Starting development server..."
+bun run dev &
+DEV_PID=$!
+log_step_end "Starting Next.js dev server"
+
+log_step_start "Waiting for Next.js dev server"
+wait_for_service "localhost" "3000" "Next.js dev server"
+log_step_end "Waiting for Next.js dev server"
+
+log_step_start "Health check"
+echo "[BUN] Performing health check..."
+curl -fsS localhost:3000 >/dev/null
+echo "[BUN] Health check passed"
+log_step_end "Health check"
+
+start_mini_services
+
+echo "Next.js dev server is running in background (PID: $DEV_PID)."
+echo "Use 'kill $DEV_PID' to stop it."
+disown "$DEV_PID" 2>/dev/null || true
+unset DEV_PID

.zscripts/mini-services-build.sh

@@ -0,0 +1,78 @@
+#!/bin/bash
+
+# 配置项
+ROOT_DIR="/home/z/my-project/mini-services"
+DIST_DIR="/tmp/build_fullstack_$BUILD_ID/mini-services-dist"
+
+main() {
+    echo "🚀 开始批量构建..."
+    
+    # 检查 rootdir 是否存在
+    if [ ! -d "$ROOT_DIR" ]; then
+        echo "ℹ️  目录 $ROOT_DIR 不存在，跳过构建"
+        return
+    fi
+    
+    # 创建输出目录（如果不存在）
+    mkdir -p "$DIST_DIR"
+    
+    # 统计变量
+    success_count=0
+    fail_count=0
+    
+    # 遍历 mini-services 目录下的所有文件夹
+    for dir in "$ROOT_DIR"/*; do
+        # 检查是否是目录且包含 package.json
+        if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
+            project_name=$(basename "$dir")
+            
+            # 智能查找入口文件 (按优先级查找)
+            entry_path=""
+            for entry in "src/index.ts" "index.ts" "src/index.js" "index.js"; do
+                if [ -f "$dir/$entry" ]; then
+                    entry_path="$dir/$entry"
+                    break
+                fi
+            done
+            
+            if [ -z "$entry_path" ]; then
+                echo "⚠️  跳过 $project_name: 未找到入口文件 (index.ts/js)"
+                continue
+            fi
+            
+            echo ""
+            echo "📦 正在构建: $project_name..."
+            
+            # 使用 bun build CLI 构建
+            output_file="$DIST_DIR/mini-service-$project_name.js"
+            
+            if bun build "$entry_path" \
+                --outfile "$output_file" \
+                --target bun \
+                --minify; then
+                echo "✅ $project_name 构建成功 -> $output_file"
+                success_count=$((success_count + 1))
+            else
+                echo "❌ $project_name 构建失败"
+                fail_count=$((fail_count + 1))
+            fi
+        fi
+    done
+    
+    if [ -f ./.zscripts/mini-services-start.sh ]; then
+        cp ./.zscripts/mini-services-start.sh "$DIST_DIR/mini-services-start.sh"
+        chmod +x "$DIST_DIR/mini-services-start.sh"
+    fi
+    
+    echo ""
+    echo "🎉 所有任务完成！"
+    if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
+        echo "✅ 成功: $success_count 个"
+        if [ $fail_count -gt 0 ]; then
+            echo "❌ 失败: $fail_count 个"
+        fi
+    fi
+}
+
+main
+

.zscripts/mini-services-install.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+
+# 配置项
+ROOT_DIR="/home/z/my-project/mini-services"
+
+main() {
+    echo "🚀 开始批量安装依赖..."
+    
+    # 检查 rootdir 是否存在
+    if [ ! -d "$ROOT_DIR" ]; then
+        echo "ℹ️  目录 $ROOT_DIR 不存在，跳过安装"
+        return
+    fi
+    
+    # 统计变量
+    success_count=0
+    fail_count=0
+    failed_projects=""
+    
+    # 遍历 mini-services 目录下的所有文件夹
+    for dir in "$ROOT_DIR"/*; do
+        # 检查是否是目录且包含 package.json
+        if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
+            project_name=$(basename "$dir")
+            echo ""
+            echo "📦 正在安装依赖: $project_name..."
+            
+            # 进入项目目录并执行 bun install
+            if (cd "$dir" && bun install); then
+                echo "✅ $project_name 依赖安装成功"
+                success_count=$((success_count + 1))
+            else
+                echo "❌ $project_name 依赖安装失败"
+                fail_count=$((fail_count + 1))
+                if [ -z "$failed_projects" ]; then
+                    failed_projects="$project_name"
+                else
+                    failed_projects="$failed_projects $project_name"
+                fi
+            fi
+        fi
+    done
+    
+    # 汇总结果
+    echo ""
+    echo "=================================================="
+    if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
+        echo "🎉 安装完成！"
+        echo "✅ 成功: $success_count 个"
+        if [ $fail_count -gt 0 ]; then
+            echo "❌ 失败: $fail_count 个"
+            echo ""
+            echo "失败的项目:"
+            for project in $failed_projects; do
+                echo "  - $project"
+            done
+        fi
+    else
+        echo "ℹ️  未找到任何包含 package.json 的项目"
+    fi
+    echo "=================================================="
+}
+
+main
+

.zscripts/mini-services-start.sh

@@ -0,0 +1,123 @@
+#!/bin/sh
+
+# 配置项
+DIST_DIR="./mini-services-dist"
+
+# 存储所有子进程的 PID
+pids=""
+
+# 清理函数：优雅关闭所有服务
+cleanup() {
+    echo ""
+    echo "🛑 正在关闭所有服务..."
+    
+    # 发送 SIGTERM 信号给所有子进程
+    for pid in $pids; do
+        if kill -0 "$pid" 2>/dev/null; then
+            service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
+            echo "   关闭进程 $pid ($service_name)..."
+            kill -TERM "$pid" 2>/dev/null
+        fi
+    done
+    
+    # 等待所有进程退出（最多等待 5 秒）
+    sleep 1
+    for pid in $pids; do
+        if kill -0 "$pid" 2>/dev/null; then
+            # 如果还在运行，等待最多 4 秒
+            timeout=4
+            while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
+                sleep 1
+                timeout=$((timeout - 1))
+            done
+            # 如果仍然在运行，强制关闭
+            if kill -0 "$pid" 2>/dev/null; then
+                echo "   强制关闭进程 $pid..."
+                kill -KILL "$pid" 2>/dev/null
+            fi
+        fi
+    done
+    
+    echo "✅ 所有服务已关闭"
+}
+
+main() {
+    echo "🚀 开始启动所有 mini services..."
+    
+    # 检查 dist 目录是否存在
+    if [ ! -d "$DIST_DIR" ]; then
+        echo "ℹ️  目录 $DIST_DIR 不存在"
+        return
+    fi
+    
+    # 查找所有 mini-service-*.js 文件
+    service_files=""
+    for file in "$DIST_DIR"/mini-service-*.js; do
+        if [ -f "$file" ]; then
+            if [ -z "$service_files" ]; then
+                service_files="$file"
+            else
+                service_files="$service_files $file"
+            fi
+        fi
+    done
+    
+    # 计算服务文件数量
+    service_count=0
+    for file in $service_files; do
+        service_count=$((service_count + 1))
+    done
+    
+    if [ $service_count -eq 0 ]; then
+        echo "ℹ️  未找到任何 mini service 文件"
+        return
+    fi
+    
+    echo "📦 找到 $service_count 个服务，开始启动..."
+    echo ""
+    
+    # 启动每个服务
+    for file in $service_files; do
+        service_name=$(basename "$file" .js | sed 's/mini-service-//')
+        echo "▶️  启动服务: $service_name..."
+        
+        # 使用 bun 运行服务（后台运行）
+        bun "$file" &
+        pid=$!
+        if [ -z "$pids" ]; then
+            pids="$pid"
+        else
+            pids="$pids $pid"
+        fi
+        
+        # 等待一小段时间检查进程是否成功启动
+        sleep 0.5
+        if ! kill -0 "$pid" 2>/dev/null; then
+            echo "❌ $service_name 启动失败"
+            # 从字符串中移除失败的 PID
+            pids=$(echo "$pids" | sed "s/\b$pid\b//" | sed 's/  */ /g' | sed 's/^ *//' | sed 's/ *$//')
+        else
+            echo "✅ $service_name 已启动 (PID: $pid)"
+        fi
+    done
+    
+    # 计算运行中的服务数量
+    running_count=0
+    for pid in $pids; do
+        if kill -0 "$pid" 2>/dev/null; then
+            running_count=$((running_count + 1))
+        fi
+    done
+    
+    echo ""
+    echo "🎉 所有服务已启动！共 $running_count 个服务正在运行"
+    echo ""
+    echo "💡 按 Ctrl+C 停止所有服务"
+    echo ""
+    
+    # 等待所有后台进程
+    wait
+}
+
+main
+

.zscripts/start.sh

@@ -0,0 +1,135 @@
+#!/bin/sh
+
+set -e
+
+# 获取脚本所在目录
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+BUILD_DIR="$SCRIPT_DIR"
+
+# 存储所有子进程的 PID
+pids=""
+
+# 清理函数：优雅关闭所有服务
+cleanup() {
+    echo ""
+    echo "🛑 正在关闭所有服务..."
+    
+    # 发送 SIGTERM 信号给所有子进程
+    for pid in $pids; do
+        if kill -0 "$pid" 2>/dev/null; then
+            service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
+            echo "   关闭进程 $pid ($service_name)..."
+            kill -TERM "$pid" 2>/dev/null
+        fi
+    done
+    
+    # 等待所有进程退出（最多等待 5 秒）
+    sleep 1
+    for pid in $pids; do
+        if kill -0 "$pid" 2>/dev/null; then
+            # 如果还在运行，等待最多 4 秒
+            timeout=4
+            while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
+                sleep 1
+                timeout=$((timeout - 1))
+            done
+            # 如果仍然在运行，强制关闭
+            if kill -0 "$pid" 2>/dev/null; then
+                echo "   强制关闭进程 $pid..."
+                kill -KILL "$pid" 2>/dev/null
+            fi
+        fi
+    done
+    
+    echo "✅ 所有服务已关闭"
+    exit 0
+}
+
+echo "🚀 开始启动所有服务..."
+echo ""
+
+# 切换到构建目录
+cd "$BUILD_DIR" || exit 1
+
+ls -lah
+
+DEFAULT_PACKAGED_DB_PATH="/app/db/custom.db"
+DEFAULT_PACKAGED_DATABASE_URL="file:$DEFAULT_PACKAGED_DB_PATH"
+
+# 启动 Next.js 服务器
+if [ -f "./next-service-dist/server.js" ]; then
+    echo "🚀 启动 Next.js 服务器..."
+    cd next-service-dist/ || exit 1
+    
+    # 设置环境变量
+    export NODE_ENV=production
+    export PORT="${PORT:-3000}"
+    export HOSTNAME="${HOSTNAME:-0.0.0.0}"
+    export DATABASE_URL="${DATABASE_URL:-$DEFAULT_PACKAGED_DATABASE_URL}"
+
+    if [ "$DATABASE_URL" = "$DEFAULT_PACKAGED_DATABASE_URL" ]; then
+        if [ ! -f "$DEFAULT_PACKAGED_DB_PATH" ]; then
+            echo "❌ 未找到打包后的数据库文件 $DEFAULT_PACKAGED_DB_PATH"
+            echo "   为避免生产环境启动到空数据库，启动已终止"
+            exit 1
+        fi
+
+        echo "🗄️  当前使用打包数据库: $DEFAULT_PACKAGED_DB_PATH"
+    else
+        echo "🗄️  当前使用外部指定数据库: $DATABASE_URL"
+    fi
+    
+    # 后台启动 Next.js
+    bun server.js &
+    NEXT_PID=$!
+    pids="$NEXT_PID"
+    
+    # 等待一小段时间检查进程是否成功启动
+    sleep 1
+    if ! kill -0 "$NEXT_PID" 2>/dev/null; then
+        echo "❌ Next.js 服务器启动失败"
+        exit 1
+    else
+        echo "✅ Next.js 服务器已启动 (PID: $NEXT_PID, Port: $PORT)"
+    fi
+    
+    cd ../
+else
+    echo "⚠️  未找到 Next.js 服务器文件: ./next-service-dist/server.js"
+fi
+
+# 启动 mini-services
+if [ -f "./mini-services-start.sh" ]; then
+    echo "🚀 启动 mini-services..."
+    
+    # 运行启动脚本（从根目录运行，脚本内部会处理 mini-services-dist 目录）
+    sh ./mini-services-start.sh &
+    MINI_PID=$!
+    pids="$pids $MINI_PID"
+    
+    # 等待一小段时间检查进程是否成功启动
+    sleep 1
+    if ! kill -0 "$MINI_PID" 2>/dev/null; then
+        echo "⚠️  mini-services 可能启动失败，但继续运行..."
+    else
+        echo "✅ mini-services 已启动 (PID: $MINI_PID)"
+    fi
+elif [ -d "./mini-services-dist" ]; then
+    echo "⚠️  未找到 mini-services 启动脚本，但目录存在"
+else
+    echo "ℹ️  mini-services 目录不存在，跳过"
+fi
+
+# 启动 Caddy（如果存在 Caddyfile）
+echo "🚀 启动 Caddy..."
+
+# Caddy 作为前台进程运行（主进程）
+echo "✅ Caddy 已启动（前台运行）"
+echo ""
+echo "🎉 所有服务已启动！"
+echo ""
+echo "💡 按 Ctrl+C 停止所有服务"
+echo ""
+
+# Caddy 作为主进程运行
+exec caddy run --config Caddyfile --adapter caddyfile

Caddyfile

@@ -0,0 +1,23 @@
+:81 {
+	@transform_port_query {
+		query XTransformPort=*
+	}
+
+	handle @transform_port_query {
+		reverse_proxy localhost:{query.XTransformPort} {
+			header_up Host {host}
+			header_up X-Forwarded-For {remote_host}
+			header_up X-Forwarded-Proto {scheme}
+			header_up X-Real-IP {remote_host}
+		}
+	}
+
+	handle {
+		reverse_proxy localhost:3000 {
+			header_up Host {host}
+			header_up X-Forwarded-For {remote_host}
+			header_up X-Forwarded-Proto {scheme}
+			header_up X-Real-IP {remote_host}
+		}
+	}
+}

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

download/README.md

@@ -0,0 +1 @@
+Here are all the generated files.

eslint.config.mjs

@@ -0,0 +1,50 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const eslintConfig = [...nextCoreWebVitals, ...nextTypescript, {
+  rules: {
+    // TypeScript rules
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/prefer-as-const": "off",
+    "@typescript-eslint/no-unused-disable-directive": "off",
+    
+    // React rules
+    "react-hooks/exhaustive-deps": "off",
+    "react-hooks/purity": "off",
+    "react/no-unescaped-entities": "off",
+    "react/display-name": "off",
+    "react/prop-types": "off",
+    "react-compiler/react-compiler": "off",
+    
+    // Next.js rules
+    "@next/next/no-img-element": "off",
+    "@next/next/no-html-link-for-pages": "off",
+    
+    // General JavaScript rules
+    "prefer-const": "off",
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "no-debugger": "off",
+    "no-empty": "off",
+    "no-irregular-whitespace": "off",
+    "no-case-declarations": "off",
+    "no-fallthrough": "off",
+    "no-mixed-spaces-and-tabs": "off",
+    "no-redeclare": "off",
+    "no-undef": "off",
+    "no-unreachable": "off",
+    "no-useless-escape": "off",
+  },
+}, {
+  ignores: ["node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts", "examples/**", "skills"]
+}];
+
+export default eslintConfig;

examples/websocket/frontend.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+type User = {
+  id: string;
+  username: string;
+}
+
+type Message = {
+  id: string;
+  username: string;
+  content: string;
+  timestamp: Date | string;
+  type: 'user' | 'system';
+}
+
+export default function SocketDemo() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputMessage, setInputMessage] = useState('');
+  const [username, setUsername] = useState('');
+  const [isUsernameSet, setIsUsernameSet] = useState(false);
+  const [socket, setSocket] = useState<any>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    // Connect to websocket server
+    // Never use PORT in the URL, alyways use XTransformPort
+    // DO NOT change the path, it is used by Caddy to forward the request to the correct port
+    const socketInstance = io('/?XTransformPort=3003', {
+      transports: ['websocket', 'polling'],
+      forceNew: true,
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000,
+      timeout: 10000
+    })
+
+    setSocket(socketInstance);
+
+    socketInstance.on('connect', () => {
+      setIsConnected(true);
+    });
+
+    socketInstance.on('disconnect', () => {
+      setIsConnected(false);
+    });
+
+    socketInstance.on('message', (msg: Message) => {
+      setMessages(prev => [...prev, msg]);
+    });
+
+    socketInstance.on('user-joined', (data: { user: User; message: Message }) => {
+      setMessages(prev => [...prev, data.message]);
+      setUsers(prev => {
+        if (!prev.find(u => u.id === data.user.id)) {
+          return [...prev, data.user];
+        }
+        return prev;
+      });
+    });
+
+    socketInstance.on('user-left', (data: { user: User; message: Message }) => {
+      setMessages(prev => [...prev, data.message]);
+      setUsers(prev => prev.filter(u => u.id !== data.user.id));
+    });
+
+    socketInstance.on('users-list', (data: { users: User[] }) => {
+      setUsers(data.users);
+    });
+
+    return () => {
+      socketInstance.disconnect();
+    };
+  }, []);
+
+  const handleJoin = () => {
+    if (socket && username.trim() && isConnected) {
+      socket.emit('join', { username: username.trim() });
+      setIsUsernameSet(true);
+    }
+  };
+
+  const sendMessage = () => {
+    if (socket && inputMessage.trim() && username.trim()) {
+      socket.emit('message', {
+        content: inputMessage.trim(),
+        username: username.trim()
+      });
+      setInputMessage('');
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      sendMessage();
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4 max-w-2xl">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            WebSocket Demo
+            <span className={`text-sm px-2 py-1 rounded ${isConnected ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+              {isConnected ? 'Connected' : 'Disconnected'}
+            </span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!isUsernameSet ? (
+            <div className="space-y-2">
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    handleJoin();
+                  }
+                }}
+                placeholder="Enter your username..."
+                disabled={!isConnected}
+                className="flex-1"
+              />
+              <Button
+                onClick={handleJoin}
+                disabled={!isConnected || !username.trim()}
+                className="w-full"
+              >
+                Join Chat
+              </Button>
+            </div>
+          ) : (
+            <>
+              <ScrollArea className="h-80 w-full border rounded-md p-4">
+                <div className="space-y-2">
+                  {messages.length === 0 ? (
+                    <p className="text-gray-500 text-center">No messages yet</p>
+                  ) : (
+                    messages.map((msg) => (
+                      <div key={msg.id} className="border-b pb-2 last:border-b-0">
+                        <div className="flex justify-between items-start">
+                          <div className="flex-1">
+                            <p className={`text-sm font-medium ${msg.type === 'system'
+                                ? 'text-blue-600 italic'
+                                : 'text-gray-700'
+                              }`}>
+                              {msg.username}
+                            </p>
+                            <p className={`${msg.type === 'system'
+                                ? 'text-blue-500 italic'
+                                : 'text-gray-900'
+                              }`}>
+                              {msg.content}
+                            </p>
+                          </div>
+                          <span className="text-xs text-gray-500">
+                            {new Date(msg.timestamp).toLocaleTimeString()}
+                          </span>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </ScrollArea>
+
+              <div className="flex space-x-2">
+                <Input
+                  value={inputMessage}
+                  onChange={(e) => setInputMessage(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                  placeholder="Type a message..."
+                  disabled={!isConnected}
+                  className="flex-1"
+                />
+                <Button
+                  onClick={sendMessage}
+                  disabled={!isConnected || !inputMessage.trim()}
+                >
+                  Send
+                </Button>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

examples/websocket/server.ts

@@ -0,0 +1,138 @@
+import { createServer } from 'http'
+import { Server } from 'socket.io'
+
+const httpServer = createServer()
+const io = new Server(httpServer, {
+  // DO NOT change the path, it is used by Caddy to forward the request to the correct port
+  path: '/',
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"]
+  },
+  pingTimeout: 60000,
+  pingInterval: 25000,
+})
+
+interface User {
+  id: string
+  username: string
+}
+
+interface Message {
+  id: string
+  username: string
+  content: string
+  timestamp: Date
+  type: 'user' | 'system'
+}
+
+const users = new Map<string, User>()
+
+const generateMessageId = () => Math.random().toString(36).substr(2, 9)
+
+const createSystemMessage = (content: string): Message => ({
+  id: generateMessageId(),
+  username: 'System',
+  content,
+  timestamp: new Date(),
+  type: 'system'
+})
+
+const createUserMessage = (username: string, content: string): Message => ({
+  id: generateMessageId(),
+  username,
+  content,
+  timestamp: new Date(),
+  type: 'user'
+})
+
+io.on('connection', (socket) => {
+  console.log(`User connected: ${socket.id}`)
+
+  // Add test event handler
+  socket.on('test', (data) => {
+    console.log('Received test message:', data)
+    socket.emit('test-response', { 
+      message: 'Server received test message', 
+      data: data,
+      timestamp: new Date().toISOString()
+    })
+  })
+
+  socket.on('join', (data: { username: string }) => {
+    const { username } = data
+    
+    // Create user object
+    const user: User = {
+      id: socket.id,
+      username
+    }
+    
+    // Add to user list
+    users.set(socket.id, user)
+    
+    // Send join message to all users
+    const joinMessage = createSystemMessage(`${username} joined the chat room`)
+    io.emit('user-joined', { user, message: joinMessage })
+    
+    // Send current user list to new user
+    const usersList = Array.from(users.values())
+    socket.emit('users-list', { users: usersList })
+    
+    console.log(`${username} joined the chat room, current online users: ${users.size}`)
+  })
+
+  socket.on('message', (data: { content: string; username: string }) => {
+    const { content, username } = data
+    const user = users.get(socket.id)
+    
+    if (user && user.username === username) {
+      const message = createUserMessage(username, content)
+      io.emit('message', message)
+      console.log(`${username}: ${content}`)
+    }
+  })
+
+  socket.on('disconnect', () => {
+    const user = users.get(socket.id)
+    
+    if (user) {
+      // Remove from user list
+      users.delete(socket.id)
+      
+      // Send leave message to all users
+      const leaveMessage = createSystemMessage(`${user.username} left the chat room`)
+      io.emit('user-left', { user: { id: socket.id, username: user.username }, message: leaveMessage })
+      
+      console.log(`${user.username} left the chat room, current online users: ${users.size}`)
+    } else {
+      console.log(`User disconnected: ${socket.id}`)
+    }
+  })
+
+  socket.on('error', (error) => {
+    console.error(`Socket error (${socket.id}):`, error)
+  })
+})
+
+const PORT = 3003
+httpServer.listen(PORT, () => {
+  console.log(`WebSocket server running on port ${PORT}`)
+})
+
+// Graceful shutdown
+process.on('SIGTERM', () => {
+  console.log('Received SIGTERM signal, shutting down server...')
+  httpServer.close(() => {
+    console.log('WebSocket server closed')
+    process.exit(0)
+  })
+})
+
+process.on('SIGINT', () => {
+  console.log('Received SIGINT signal, shutting down server...')
+  httpServer.close(() => {
+    console.log('WebSocket server closed')
+    process.exit(0)
+  })
+})

next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  /* config options here */
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  reactStrictMode: false,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,94 @@
+{
+  "name": "nextjs_tailwind_shadcn_ts",
+  "version": "0.2.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000 2>&1 | tee dev.log",
+    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
+    "start": "NODE_ENV=production bun .next/standalone/server.js 2>&1 | tee server.log",
+    "lint": "eslint .",
+    "db:push": "prisma db push",
+    "db:generate": "prisma generate",
+    "db:migrate": "prisma migrate dev",
+    "db:reset": "prisma migrate reset"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.1.1",
+    "@mdxeditor/editor": "^3.39.1",
+    "@prisma/client": "^6.11.1",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@reactuses/core": "^6.0.5",
+    "@tanstack/react-query": "^5.82.0",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.525.0",
+    "next": "^16.1.1",
+    "next-auth": "^4.24.11",
+    "next-intl": "^4.3.4",
+    "next-themes": "^0.4.6",
+    "prisma": "^6.11.1",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.8.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.60.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.3",
+    "react-syntax-highlighter": "^15.6.1",
+    "recharts": "^2.15.4",
+    "sharp": "^0.34.3",
+    "sonner": "^2.0.6",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.1.0",
+    "vaul": "^1.1.2",
+    "z-ai-web-dev-sdk": "^0.0.18",
+    "zod": "^4.0.2",
+    "zustand": "^5.0.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "bun-types": "^1.3.4",
+    "eslint": "^9",
+    "eslint-config-next": "^16.1.1",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

prisma/schema.prisma

@@ -0,0 +1,32 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Post {
+  id        String   @id @default(cuid())
+  title     String
+  content   String?
+  published Boolean  @default(false)
+  authorId  String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

public/logo.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<defs>
+  <style type="text/css">
+    .st194{fill:#2D2D2D;stroke:#FFFFFF;stroke-width:0.6317;stroke-miterlimit:10;}
+    .st23{fill:#FFFFFF;}
+
+    .z-breathe {
+      animation: breathe 2.5s ease-in-out infinite;
+    }
+
+    @keyframes breathe {
+      0%, 100% { opacity: 0.7; }
+      50% { opacity: 1; }
+    }
+  </style>
+</defs>
+
+<g>
+  <path class="st194" d="M24.51,28.51H5.49c-2.21,0-4-1.79-4-4V5.49c0-2.21,1.79-4,4-4h19.03c2.21,0,4,1.79,4,4v19.03
+    C28.51,26.72,26.72,28.51,24.51,28.51z"/>
+  <g class="z-breathe">
+    <path class="st23" d="M15.47,7.1l-1.3,1.85c-0.2,0.29-0.54,0.47-0.9,0.47h-7.1V7.09C6.16,7.1,15.47,7.1,15.47,7.1z"/>
+    <polygon class="st23" points="24.3,7.1 13.14,22.91 5.7,22.91 16.86,7.1"/>
+    <path class="st23" d="M14.53,22.91l1.31-1.86c0.2-0.29,0.54-0.47,0.9-0.47h7.09v2.33H14.53z"/>
+  </g>
+</g>
+</svg>

public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /

research/research_browser_games.json

@@ -0,0 +1,92 @@
+[
+  {
+    "url": "https://www.reddit.com/r/incremental_games/comments/1e0kbnq/your_favorite_website_for_browser_based_clicker",
+    "name": "Your favorite website for browser based Clicker / Incremental games?",
+    "snippet": "I have been on these sites before: Armor Games, Poki, Crazy Games, Kongregate, Addicting Games, Pogo, PLayhop, and Agame. Please post with your favorite ...",
+    "host_name": "www.reddit.com",
+    "rank": 0,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=dlOlJtSCeg0",
+    "name": "TOP Incremental Games of 2025 (so far!) - YouTube",
+    "snippet": "Comments ; My Most Anticipated Incremental Game is Here and It's SO GOOD! Idle cub · 322K views ; I Found The MOST PROMISING New Strategy Games At ...",
+    "host_name": "www.youtube.com",
+    "rank": 1,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.gamespot.com/gallery/best-idle-games/2900-5676",
+    "name": "The 29 Best Idle Games To Sink Your Time Into In 2026 - GameSpot",
+    "snippet": "Check out 28 of the most satisfying idle, clicker, and incremental games you can get lost in right now.",
+    "host_name": "www.gamespot.com",
+    "rank": 2,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=sotC84tIdnQ",
+    "name": "The Best Idle/Incremental Games of 2025 - YouTube",
+    "snippet": "For this part of my favorite games of 2025, I'm going over the idle/incremental games I enjoyed. 00:00 Intro 00:18 Progress Racer RPG 1:36 ...",
+    "host_name": "www.youtube.com",
+    "rank": 3,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=37lXc529m2M&vl=en",
+    "name": "Top 10 Mobile Idle Games of 2026! NEW GAMES REVEALED for",
+    "snippet": "I have praised and denounced you in the past. You seem to be on a great upswing in quality of production. Your research is very good.",
+    "host_name": "www.youtube.com",
+    "rank": 4,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://forum.quartertothree.com/t/some-incremental-idle-clicker-games-including-really-a-lot-of-incremental-epic-hero-2/145358",
+    "name": "Some Incremental/Idle/Clicker Games (including really a lot of",
+    "snippet": "Here are a few of my favorite clickers: Universal Paperclips - browser-based game which uses local storage. Completely free, with no IAPs, no ads.",
+    "host_name": "forum.quartertothree.com",
+    "rank": 5,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://bitsnpixels.org/p/best-idle-clicker-games-2025",
+    "name": "The Best Idle & Clicker Games to Play in 2025 - Bits N' Pixels",
+    "snippet": "Clicker Games · Cookie Clicker · Melvor Idle and Melvor Idle 2 · Faceminer · Idle Colony.",
+    "host_name": "bitsnpixels.org",
+    "rank": 6,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.resetera.com/threads/incremental-game-recommendations.1231149",
+    "name": "incremental game recommendations - ResetEra",
+    "snippet": "I really liked Space Plan - it's on Steam and iOS (and maybe more?). It's got a story and is, for incremental games, fairly short to complete.",
+    "host_name": "www.resetera.com",
+    "rank": 7,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.hp.com/us-en/shop/tech-takes/best-idle-browser-games",
+    "name": "Best Idle Browser Games | HP® Tech Takes",
+    "snippet": "10 Best Idle Browser Games for 2024 · 1. Cyber Rebellion · 2. Summon Dragons 2 · 3. War Spell · 4. Legend of Fighters · 5. Omni Heroes · 6. Endless ...",
+    "host_name": "www.hp.com",
+    "rank": 8,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.reddit.com/r/incremental_games",
+    "name": "r/incremental_games - Reddit",
+    "snippet": "This thread is meant for discussing any incremental games you might be playing and your progress in it so far. Explain briefly why you think the game is ...",
+    "host_name": "www.reddit.com",
+    "rank": 9,
+    "date": "",
+    "favicon": ""
+  }
+]

research/research_game_design.json

@@ -0,0 +1,92 @@
+[
+  {
+    "url": "https://www.reddit.com/r/gamedesign/comments/1els3pg/sharing_my_17_strategies_for_improving_player",
+    "name": "Sharing my 17 strategies for improving player retention (and I want",
+    "snippet": "The ideal player retention strategy for any game is the one that maximizes players' engagement and fulfillment while minimizing the extra ...",
+    "host_name": "www.reddit.com",
+    "rank": 0,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=sZWJw1RWH6s",
+    "name": "Game Design For Engagement & Retention: How to keep  - YouTube",
+    "snippet": "... mechanics of your game by focussing on: • Core loops and configurations ... Player Engagement & Retention', and 'Game Economy Design'.",
+    "host_name": "www.youtube.com",
+    "rank": 1,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.juegostudio.com/blog/how-to-increase-user-retention-and-increase-your-games-lifetime",
+    "name": "Game Retention Strategies: Metrics, Benchmarks, and Mechanics",
+    "snippet": "Most studios track the wrong metrics. Learn the MBBM framework to engineer retention with proven strategies for D1, D7, and D30 benchmarks ...",
+    "host_name": "www.juegostudio.com",
+    "rank": 2,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.gamedeveloper.com/business/motivate-player-for-better-engagement-and-retention",
+    "name": "Motivate player for better engagement and retention",
+    "snippet": "Design new features to please specific player type to reengage them for a longer period of time while they discover it. Plan to have features discovered by the ...",
+    "host_name": "www.gamedeveloper.com",
+    "rank": 3,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.deloitte.com/us/en/services/consulting/articles/lifetime-value-player-retention.html",
+    "name": "Player LTV in Games : Growth and Retention | Deloitte US",
+    "snippet": "How game publishers, studios, and platforms can boost player retention, engagement and profitability by increasing player lifetime value (player LTV).",
+    "host_name": "www.deloitte.com",
+    "rank": 4,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.linkedin.com/top-content/sales/customer-retention-strategies/how-to-improve-player-retention-in-gaming",
+    "name": "How to Improve Player Retention in Gaming - LinkedIn",
+    "snippet": "Improving retention involves understanding what makes people return, from engaging gameplay to meaningful social connections and smooth operational systems.",
+    "host_name": "www.linkedin.com",
+    "rank": 5,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.cgspectrum.com/blog/game-design-principles-player-engagement",
+    "name": "How Game Design Principles Drive Player Engagement",
+    "snippet": "This post will define the principles of game design and explain how they enhance player engagement, giving you an inside look at the decision-making process.",
+    "host_name": "www.cgspectrum.com",
+    "rank": 6,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://northjerseyvipers.teamsnapsites.com/how-game-design-shapes-user-engagement-today",
+    "name": "How Game Design Shapes User Engagement Today",
+    "snippet": "Game mechanics—the rules that govern gameplay—directly influence player behavior and motivation. For instance, mechanics that promote social ...",
+    "host_name": "northjerseyvipers.teamsnapsites.com",
+    "rank": 7,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.dice.com/career-advice/aspiring-video-game-designers-in-2025-what-you-need-to-know",
+    "name": "Aspiring Video Game Designers in 2025: What You Need to Know",
+    "snippet": "... game themes, innovative mechanics, level design patterns, and even tweaks for player retention, helping designers make data-informed decisions.",
+    "host_name": "www.dice.com",
+    "rank": 8,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://gamedesignskills.com/game-design/player-retention",
+    "name": "17 Proven Player Retention Strategies and Tactics",
+    "snippet": "Let's go over the 17 different strategies and tactics game devs use to retain their players' attention, which will fall into one of these two categories.",
+    "host_name": "gamedesignskills.com",
+    "rank": 9,
+    "date": "",
+    "favicon": ""
+  }
+]

research/research_indie_genres.json

@@ -0,0 +1,92 @@
+[
+  {
+    "url": "https://www.reddit.com/r/gamedesign/comments/138gkdz/what_game_genres_are_currently_popular_and_which",
+    "name": "Game genres indie developers should avoid - Reddit",
+    "snippet": "Genres such as Roguelike Deckbuilder, Visual Novel, Couch-Coop, and 4X have audiences that are more likely to try more than just 1 game.",
+    "host_name": "www.reddit.com",
+    "rank": 0,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=XJqiureUgVY",
+    "name": "Top 25 Best Indie Games of February 2025 - YouTube",
+    "snippet": "SPONSOR: Cluckmech Oasis: https://store.steampowered.com/app/2453360/Cluckmech_Oasis/ Get it on discount during the Steam Spring Sale 2025!",
+    "host_name": "www.youtube.com",
+    "rank": 1,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://howtomarketagame.com/2026/01/27/what-the-hell-happened-in-2025",
+    "name": "What the hell happened in 2025? - How To Market A Game",
+    "snippet": "51 Total narrative games reached 1000 reviews in 2025 moving it to the #1 genre on Steam. If you look at my “Genre changes through the years” ...",
+    "host_name": "howtomarketagame.com",
+    "rank": 2,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://rocketbrush.com/blog/top-10-indie-games",
+    "name": "10 Best Indie Games of 2025 | Top by RocketBrush Studio",
+    "snippet": "Explore the top 10 indie games of 2025, including Ways of Alchemy, Hades II and Deltarune. Discover unique gameplay, engaging stories, ...",
+    "host_name": "rocketbrush.com",
+    "rank": 3,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.superjumpmagazine.com/the-state-of-indie-games-in-2025-and-beyond-part-1",
+    "name": "The State of Indie Games in 2025 and Beyond, Part 1 | SUPERJUMP",
+    "snippet": "First are the new wave genres essentially developed in the indie space, including open world survival, deckbuilders, and some roguelike ...",
+    "host_name": "www.superjumpmagazine.com",
+    "rank": 4,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=V7-R8SRHPZs",
+    "name": "The Top 10 Indie Games / Roguelikes of 2025 - YouTube",
+    "snippet": "It is once again time for me to crown my Game of the Year in 2025. It's been a wild year for gaming, so we've got a lot to talk about.",
+    "host_name": "www.youtube.com",
+    "rank": 5,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://store.steampowered.com/genre/Indie/?snr=1_5_9__408",
+    "name": "Indie - Steam",
+    "snippet": "Indie. Featured. Singleplayer. Multiplayer. Co-op. VR. Free to Play. Upcoming ... Popular Upcoming. Upcoming. Filters. No matches found. Show more. Something went ...",
+    "host_name": "store.steampowered.com",
+    "rank": 6,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://goodgamelobby.substack.com/p/25-best-indie-games-of-2025-part-1-25-11",
+    "name": "25 Best Indie Games of 2025 | 25 - 11 - by Sey - Good Game Lobby",
+    "snippet": "Check out Part 1 the 25 Best Indie Games of 2025! Explore why these games made the list and dive into full reviews for an in-depth look.",
+    "host_name": "goodgamelobby.substack.com",
+    "rank": 7,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=1agm7FvrdVI",
+    "name": "The ULTIMATE Genre for Indie Solo Devs REVEALED (2025 edition)",
+    "snippet": "NEW - My indie game Runes of the Abyss - WISHLIST NOW ON STEAM: http://s.team/a/3794050 If you wanted to know my answer right away, ...",
+    "host_name": "www.youtube.com",
+    "rank": 8,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://tavrox.medium.com/game-dev-trends-for-2025-41da77d7d47e",
+    "name": "Game Dev Trends for 2025 - Tavrox - Medium",
+    "snippet": "Game Dev Trends for 2025 · The Case of the Golden Idol on Steam. A new kind of detective game that allows you to think and investigate freely.",
+    "host_name": "tavrox.medium.com",
+    "rank": 9,
+    "date": "",
+    "favicon": ""
+  }
+]

research/research_tech_stack.json

@@ -0,0 +1,74 @@
+[
+  {
+    "url": "https://dev.to/davidmorais/updating-my-websites-tech-stack-in-2025-35n3",
+    "name": "Updating my website's tech stack in 2025 - DEV Community",
+    "snippet": "In this post, I will detail as much as possible what hardships I faced, decisions I took and the final result.",
+    "host_name": "dev.to",
+    "rank": 0,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://medium.com/the-research-nest/this-is-my-go-to-tech-stack-for-new-web-projects-in-2025-d81ef1cc4130",
+    "name": "This is my go-to tech stack for new web projects in 2025 - Medium",
+    "snippet": "My go-to frontend tech stack for personal projects has been Svelte with SvelteKit. I also use Bun as the package manager and Tailwind CSS (or custom CSS) for ...",
+    "host_name": "medium.com",
+    "rank": 1,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.reddit.com/r/nextjs/comments/1lpnvvo/my_mvp_tech_stack_for_2025",
+    "name": "My MVP tech stack for 2025 : r/nextjs - Reddit",
+    "snippet": "I have settled on a stack that balances development speed and experience, with future proofing without getting too fancy. Here's what I'm using and why.",
+    "host_name": "www.reddit.com",
+    "rank": 2,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=UdyzfCN8Mwk",
+    "name": "My Simple Tech Stack for 2025 ($0 / month) - YouTube",
+    "snippet": "After shipping over 10 full stack apps in the past year, I kept coming back to this Tech Stack. #nextjs #react #typescript #javascript #saas ...",
+    "host_name": "www.youtube.com",
+    "rank": 3,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.linkedin.com/posts/sanchit0496_reactjs-nextjs-javascript-activity-7320785137766424576-H715",
+    "name": "Frontend Tech Stack Evolution 2024 2025 | Sanchit Raj - LinkedIn",
+    "snippet": "Next.js isn't just a library; it's the full-package solution for modern web development, offering superior server-side rendering and routing.",
+    "host_name": "www.linkedin.com",
+    "rank": 4,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://generalistprogrammer.com/tutorials/webgl-game-development-complete-browser-gaming-guide-2025",
+    "name": "WebGL Game Development: Complete Browser Gaming Guide 2025",
+    "snippet": "WebGL game development guide: complete tutorial for browser-based 3D games, Three.js, performance optimization, and deployment.",
+    "host_name": "generalistprogrammer.com",
+    "rank": 5,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://stackoverflow.com/questions/21603350/is-there-any-reason-for-using-webgl-instead-of-2d-canvas-for-2d-games-apps",
+    "name": "Is there any reason for using WebGL instead of 2D Canvas for 2D",
+    "snippet": "WebGL is faster and it has more capabilities. No doubt about that. It's a native 3D API that gives you full access to the rendering pipeline.",
+    "host_name": "stackoverflow.com",
+    "rank": 6,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=vUYopHWOURg",
+    "name": "Build a Full Stack Social App with React & Next.js - YouTube",
+    "snippet": "Next.js Tutorial 2025 - Build a Full Stack Social App with React & Next.js. 147K views · 1 year ago. #nextjs #reactjs #programming ...more ...",
+    "host_name": "www.youtube.com",
+    "rank": 7,
+    "date": "",
+    "favicon": ""
+  }
+]

research/research_web_games.json

@@ -0,0 +1,92 @@
+[
+  {
+    "url": "https://www.businessresearchinsights.com/market-reports/browser-games-market-108675",
+    "name": "Browser Games Market Size, Trend | Forecast Report, 2035",
+    "snippet": "In 2025, more than 15,000 browser-compatible HTML5 titles entered the market, representing a 2.7x annual increase. Browser Games Market Growth ...",
+    "host_name": "www.businessresearchinsights.com",
+    "rank": 0,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://dataintelo.com/report/browser-game-market",
+    "name": "Browser Game Market Research Report 2034 - Dataintelo",
+    "snippet": "The browser game market was valued at $11.8 billion in 2025 and is projected to reach $16.3 billion by 2034, growing at a 3.5% CAGR.",
+    "host_name": "dataintelo.com",
+    "rank": 1,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.researchandmarkets.com/reports/5939597/browser-games-market-report?srsltid=AfmBOoo1VO_oLfXCxOpyf3g8oL5J27bqCvTqcSojU1gdh1dTajVSzfIJ",
+    "name": "Browser Games Market Report 2026 - Research and Markets",
+    "snippet": "The browser games market size has grown steadily in recent years. It will grow from $7.81 billion in 2025 to $8.01 billion in 2026 at a compound annual growth ...",
+    "host_name": "www.researchandmarkets.com",
+    "rank": 2,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.juegostudio.com/blog/emerging-trends-for-modern-html5-game-development-in-2025",
+    "name": "Emerging Trends for Modern HTML5 Game Development in 2026",
+    "snippet": "In this blog, we'll explore the key trends transforming HTML5 games and how developers can leverage them to meet the evolving expectations of today's players.",
+    "host_name": "www.juegostudio.com",
+    "rank": 3,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.html5gamedevs.com/topic/57160-what-are-the-html5-game-development-trends-you-should-watch-in-2025",
+    "name": "What are the HTML5 Game Development Trends You Should Watch",
+    "snippet": "In 2025, HTML5 game development is set to grow in power and creativity. WebAssembly will keep games fast and loaded with complex features.",
+    "host_name": "www.html5gamedevs.com",
+    "rank": 4,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://metastatinsight.com/report/html5-games-market",
+    "name": "HTML5 Games Market Size, Share, Growth by 2030 | Metastat Insights",
+    "snippet": "The Global HTML5 Games market is estimated to reach $2,380.3 Million by 2030; growing at a CAGR of 7.7% from 2023 to 2030.",
+    "host_name": "metastatinsight.com",
+    "rank": 5,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.linkedin.com/pulse/rise-casual-html5-games-opportunities-investors-xdwlf",
+    "name": "The Rise of Casual HTML5 Games: Opportunities for Investors",
+    "snippet": "The global HTML5 games market was valued at approximately USD 5.32 billion in 2024 and is projected to reach USD 9.22 billion by 2033, growing ...",
+    "host_name": "www.linkedin.com",
+    "rank": 6,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.reddit.com/r/gamedev/comments/1mnaw7r/what_do_you_think_about_online_browser_games_in",
+    "name": "What do you think about online browser games in 2025? (+  - Reddit",
+    "snippet": "A couple things to consider- the accessibility of web games makes the potential audience much larger (especially internationally), and web games ...",
+    "host_name": "www.reddit.com",
+    "rank": 7,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.youtube.com/watch?v=5omoZzrSxhU",
+    "name": "Building the Next Generation of Play in the Browser | #IGDC2025",
+    "snippet": "... Web Games: Building the Next Generation of Play in the Browser | #IGDC2025 ... Game Design Real Lessons From a Top Cricket Title | #IGDC2025.",
+    "host_name": "www.youtube.com",
+    "rank": 8,
+    "date": "",
+    "favicon": ""
+  },
+  {
+    "url": "https://www.pocketgamer.biz/the-big-games-industry-trends-and-stories-to-watch-in-2025",
+    "name": "The big games industry trends and stories to watch in 2025",
+    "snippet": "The big games industry trends and stories to watch in 2025. A look at a few of the key stories to keep an eye on this year.",
+    "host_name": "www.pocketgamer.biz",
+    "rank": 9,
+    "date": "",
+    "favicon": ""
+  }
+]

src/app/api/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  return NextResponse.json({ message: "Hello, world!" });
+}

src/app/globals.css

@@ -0,0 +1,151 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.13 0.02 290);
+  --foreground: oklch(0.97 0.01 200);
+  --card: oklch(0.19 0.025 290);
+  --card-foreground: oklch(0.97 0.01 200);
+  --popover: oklch(0.19 0.025 290);
+  --popover-foreground: oklch(0.97 0.01 200);
+  --primary: oklch(0.78 0.17 162);
+  --primary-foreground: oklch(0.15 0.02 290);
+  --secondary: oklch(0.28 0.03 290);
+  --secondary-foreground: oklch(0.97 0.01 200);
+  --muted: oklch(0.26 0.02 290);
+  --muted-foreground: oklch(0.72 0.02 200);
+  --accent: oklch(0.32 0.05 320);
+  --accent-foreground: oklch(0.97 0.01 200);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.72 0.16 320);
+  --chart-1: oklch(0.72 0.19 162);
+  --chart-2: oklch(0.74 0.18 15);
+  --chart-3: oklch(0.82 0.17 75);
+  --chart-4: oklch(0.72 0.22 320);
+  --chart-5: oklch(0.78 0.13 195);
+  --sidebar: oklch(0.19 0.025 290);
+  --sidebar-foreground: oklch(0.97 0.01 200);
+  --sidebar-primary: oklch(0.78 0.17 162);
+  --sidebar-primary-foreground: oklch(0.15 0.02 290);
+  --sidebar-accent: oklch(0.32 0.05 320);
+  --sidebar-accent-foreground: oklch(0.97 0.01 200);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.72 0.16 320);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    background-color: #050410;
+  }
+}
+
+/* 全局滚动条 */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }
+::-webkit-scrollbar-track { background: transparent; }
+
+/* 玻璃态卡片 */
+.glass {
+  background: rgba(20, 16, 40, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* 渐变文字 */
+.text-gradient {
+  background: linear-gradient(135deg, #34d399 0%, #e879f9 50%, #fb7185 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* 通用脉冲 */
+@keyframes echo-glow {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}

src/app/layout.tsx

@@ -0,0 +1,52 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Toaster } from "@/components/ui/toaster";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "回响星核 · Echo Nexus",
+  description: "原创深空考古放置策略游戏 — 解码记忆晶体，拼凑以太文明的回响，跨越维度发起接触。",
+  keywords: ["Echo Nexus", "回响星核", "idle game", "browser game", "放置游戏", "解谜", "深空考古"],
+  authors: [{ name: "Super_Z" }],
+  icons: {
+    icon: "https://z-cdn.chatglm.cn/z-ai/static/logo.svg",
+  },
+  openGraph: {
+    title: "回响星核 · Echo Nexus",
+    description: "原创深空考古放置策略游戏",
+    siteName: "Echo Nexus",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "回响星核 · Echo Nexus",
+    description: "原创深空考古放置策略游戏",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN" suppressHydrationWarning className="dark">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
+      >
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,347 @@
+"use client";
+// 回响星核 / Echo Nexus — 游戏主入口
+import { useState, useEffect } from "react";
+import { StarfieldCanvas } from "@/components/game/StarfieldCanvas";
+import { ResourceBar } from "@/components/game/ResourceBar";
+import { CrystalOrb } from "@/components/game/CrystalOrb";
+import { DecodePanel } from "@/components/game/DecodeArray";
+import { TechTree } from "@/components/game/TechTree";
+import { Codex } from "@/components/game/Codex";
+import { PrestigeDialog } from "@/components/game/PrestigeDialog";
+import { SettingsDialog } from "@/components/game/SettingsDialog";
+import { ExpeditionPanel } from "@/components/game/ExpeditionPanel";
+import { AchievementsPanel } from "@/components/game/AchievementsPanel";
+import { AchievementNotifier } from "@/components/game/AchievementNotifier";
+import { ConstellationPanel } from "@/components/game/ConstellationPanel";
+import { ConstellationDialog } from "@/components/game/ConstellationDialog";
+import {
+  StarTideNotifier,
+  StarTideIndicator,
+  StarTideOverlay,
+} from "@/components/game/StarTide";
+import { useGameLoop } from "@/hooks/useGameLoop";
+import { useAudioSync } from "@/hooks/useAudio";
+import { useGameStore } from "@/store/gameStore";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import {
+  Settings,
+  RotateCcw,
+  Sparkles,
+  Cpu,
+  BookOpen,
+  BarChart3,
+  Rocket,
+  Github,
+  Trophy,
+  Star,
+} from "lucide-react";
+import { TECH_TREE, FRAGMENTS, formatNum } from "@/lib/game/config";
+import { ACHIEVEMENTS } from "@/lib/game/achievements";
+import { TIDE_EVENTS } from "@/lib/game/starTide";
+import { CONSTELLATION_PERKS } from "@/lib/game/constellation";
+
+export default function Page() {
+  useGameLoop();
+  useAudioSync();
+  const [prestigeOpen, setPrestigeOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [constellationOpen, setConstellationOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  const contact = useGameStore((s) => s.contact);
+  const totalDecoded = useGameStore((s) => s.totalDecoded);
+  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
+  const ascensions = useGameStore((s) => s.ascensions);
+  const ownedTech = useGameStore((s) => s.tech);
+  const ownedFragments = useGameStore((s) => s.fragments);
+  const ownedAchievements = useGameStore((s) => s.achievements);
+  const ownedConstellation = useGameStore((s) => s.constellation ?? []);
+  const pendingPerkChoices = useGameStore((s) => s.pendingPerkChoices);
+  const crystals = useGameStore((s) => s.crystals);
+  const crystalCap = useGameStore((s) => s.crystalCap);
+  const activeTide = useGameStore((s) => s.activeTide);
+  const energy = useGameStore((s) => s.energy);
+  const hasActiveExpedition = useGameStore((s) => !!s.activeExpedition && !s.activeExpedition.finished);
+
+  // 挂载检测：避免持久化 store 在 SSR/CSR 间产生 hydration 不一致
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true);
+  }, []);
+
+  // 防止 SSR/CSR 不一致
+  if (!mounted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[#050410] text-muted-foreground">
+        <div className="animate-pulse">唤醒回响中…</div>
+      </div>
+    );
+  }
+
+  const ownedTechCount = Object.values(ownedTech).filter((v) => v > 0).length;
+  const ownedFragCount = Object.values(ownedFragments).filter(Boolean).length;
+  const ownedAchCount = Object.values(ownedAchievements).filter(Boolean).length;
+  const ownedConstCount = ownedConstellation.length;
+  const canPrestige = contact >= 100;
+  const hasPendingPerk = pendingPerkChoices && pendingPerkChoices.length > 0;
+
+  // 仓库满仓警告
+  const warehouseFull = crystals >= crystalCap * 0.98;
+
+  // 目标提示
+  let goal = "点击中央晶体发起脉冲，累积记忆晶体";
+  if (totalDecoded === 0 && crystals >= 5) {
+    goal = "右侧「待解码晶体」点击一颗晶体，开始解码";
+  } else if (totalDecoded > 0 && ownedTechCount === 0) {
+    goal = "用洞见解锁技术树，提升产能";
+  } else if (totalDecoded > 0 && ownedFragCount < FRAGMENTS.length) {
+    goal = `继续解码，拼凑记忆图谱（${ownedFragCount}/${FRAGMENTS.length}）`;
+  }
+  if (energy >= 1 && totalDecoded >= 3) {
+    goal = "「探险」标签可深入遗迹，获取丰厚奖励";
+  }
+  if (warehouseFull) {
+    goal = "⚠ 仓库已满，产能浪费中！请解码晶体或升级仓库";
+  }
+  if (hasPendingPerk) {
+    goal = "✦ 星图觉醒！点击顶部「星图」按钮选择一道天赋";
+  }
+  if (activeTide) {
+    const tm = TIDE_EVENTS[activeTide.type];
+    goal = `${tm.icon} 星潮「${tm.name}」进行中 · ${tm.desc}`;
+  }
+  if (canPrestige) goal = "✦ 接触进度已满，可发起飞升进入新周目";
+
+  return (
+    <div className="relative min-h-screen flex flex-col bg-[#050410] text-foreground overflow-x-hidden">
+      {/* 星空背景 */}
+      <StarfieldCanvas className="fixed inset-0 w-full h-full -z-10" />
+      {/* 星潮背景叠层 */}
+      <StarTideOverlay />
+
+      {/* 顶部 Header */}
+      <header className="sticky top-0 z-30 px-3 sm:px-5 pt-3 pb-2">
+        <div className="flex items-center gap-3 mb-2.5">
+          <div className="flex items-center gap-2.5">
+            <div className="relative h-9 w-9">
+              <div className="absolute inset-0 rounded-full bg-gradient-to-br from-emerald-400 via-fuchsia-500 to-rose-400 blur-md opacity-60" />
+              <div className="absolute inset-1 rounded-full bg-[#050410] flex items-center justify-center">
+                <Sparkles className="h-4 w-4 text-fuchsia-300" />
+              </div>
+            </div>
+            <div className="leading-tight">
+              <h1 className="text-base sm:text-lg font-bold text-gradient">回响星核</h1>
+              <p className="text-[9px] sm:text-[10px] text-muted-foreground/70 -mt-0.5 tracking-wider">
+                ECHO NEXUS · v0.3.1
+              </p>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-1.5">
+            <StarTideIndicator />
+            {hasPendingPerk && (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setConstellationOpen(true)}
+                className="border-fuchsia-400/60 text-fuchsia-200 hover:bg-fuchsia-500/15 h-8 px-2.5 animate-pulse"
+              >
+                <Star className="h-3.5 w-3.5 mr-1" />
+                觉醒
+              </Button>
+            )}
+            {canPrestige && (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setPrestigeOpen(true)}
+                className="border-fuchsia-400/50 text-fuchsia-200 hover:bg-fuchsia-500/10 h-8 px-2.5"
+              >
+                <RotateCcw className="h-3.5 w-3.5 mr-1" />
+                飞升
+              </Button>
+            )}
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => setSettingsOpen(true)}
+              className="h-8 w-8"
+              aria-label="设置"
+            >
+              <Settings className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <ResourceBar onPrestige={() => setPrestigeOpen(true)} />
+      </header>
+
+      {/* 主体 */}
+      <main className="flex-1 px-3 sm:px-5 pb-3 min-h-0">
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr_minmax(360px,420px)] gap-3 h-full">
+          {/* 左侧：脉冲晶体 */}
+          <section className="glass rounded-2xl p-4 sm:p-6 flex flex-col items-center justify-center min-h-[420px] relative overflow-hidden">
+            {/* 装饰光圈 */}
+            <div className="pointer-events-none absolute -top-20 -left-20 h-60 w-60 rounded-full bg-emerald-500/10 blur-3xl" />
+            <div className="pointer-events-none absolute -bottom-20 -right-20 h-60 w-60 rounded-full bg-fuchsia-500/10 blur-3xl" />
+            <CrystalOrb />
+          </section>
+
+          {/* 右侧：解码 + 标签面板 */}
+          <section className="flex flex-col gap-3 min-h-0">
+            {/* 解码面板 */}
+            <div className="glass rounded-2xl p-4 flex-1 min-h-[360px] max-h-[560px]">
+              <DecodePanel />
+            </div>
+            {/* 标签面板：探险 / 技术 / 星图 / 图谱 / 成就 / 统计 */}
+            <div className="glass rounded-2xl p-3 min-h-[320px] max-h-[440px]">
+              <Tabs defaultValue={hasActiveExpedition ? "expedition" : hasPendingPerk ? "constellation" : "tech"} className="h-full flex flex-col">
+                <TabsList className="grid grid-cols-6 h-8 bg-black/30">
+                  <TabsTrigger value="expedition" className="text-[11px] gap-0.5 relative px-1">
+                    <Rocket className="h-3 w-3" />
+                    探险
+                    {energy >= 1 && !hasActiveExpedition && (
+                      <span className="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+                    )}
+                    {hasActiveExpedition && (
+                      <span className="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-rose-400 animate-pulse" />
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="tech" className="text-[11px] gap-0.5 px-1">
+                    <Cpu className="h-3 w-3" />
+                    技术
+                  </TabsTrigger>
+                  <TabsTrigger value="constellation" className="text-[11px] gap-0.5 relative px-1">
+                    <Star className="h-3 w-3" />
+                    星图
+                    {hasPendingPerk && (
+                      <span className="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-fuchsia-400 animate-pulse" />
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="codex" className="text-[11px] gap-0.5 px-1">
+                    <BookOpen className="h-3 w-3" />
+                    图谱
+                  </TabsTrigger>
+                  <TabsTrigger value="ach" className="text-[11px] gap-0.5 relative px-1">
+                    <Trophy className="h-3 w-3" />
+                    成就
+                    {ownedAchCount < ACHIEVEMENTS.length && (
+                      <span className="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="stats" className="text-[11px] gap-0.5 px-1">
+                    <BarChart3 className="h-3 w-3" />
+                    统计
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="expedition" className="flex-1 mt-2 min-h-0 data-[state=active]:flex data-[state=active]:flex-col">
+                  <ExpeditionPanel />
+                </TabsContent>
+                <TabsContent value="tech" className="flex-1 mt-2 min-h-0 data-[state=active]:flex data-[state=active]:flex-col">
+                  <TechTree />
+                </TabsContent>
+                <TabsContent value="constellation" className="flex-1 mt-2 min-h-0 data-[state=active]:flex data-[state=active]:flex-col">
+                  <ConstellationPanel />
+                </TabsContent>
+                <TabsContent value="codex" className="flex-1 mt-2 min-h-0 data-[state=active]:flex data-[state=active]:flex-col">
+                  <Codex />
+                </TabsContent>
+                <TabsContent value="ach" className="flex-1 mt-2 min-h-0 data-[state=active]:flex data-[state=active]:flex-col">
+                  <AchievementsPanel />
+                </TabsContent>
+                <TabsContent value="stats" className="flex-1 mt-2 min-h-0">
+                  <StatsPanel />
+                </TabsContent>
+              </Tabs>
+            </div>
+          </section>
+        </div>
+      </main>
+
+      {/* 底部 Footer */}
+      <footer className="sticky bottom-0 z-20 mt-auto px-3 sm:px-5 pb-2 pt-1">
+        <div
+          className={`glass rounded-xl px-3 py-2 flex items-center gap-2 text-xs ${
+            warehouseFull ? "border-amber-400/40 animate-pulse" : ""
+          } ${activeTide ? "border-white/20" : ""}`}
+          style={
+            activeTide
+              ? { boxShadow: `inset 0 0 16px ${TIDE_EVENTS[activeTide.type].glow}` }
+              : undefined
+          }
+        >
+          <span
+            className={
+              warehouseFull
+                ? "text-amber-400"
+                : activeTide
+                ? ""
+                : "text-fuchsia-300"
+            }
+            style={activeTide ? { color: TIDE_EVENTS[activeTide.type].color } : undefined}
+          >
+            ▶
+          </span>
+          <span
+            className={`flex-1 truncate ${
+              warehouseFull ? "text-amber-200" : "text-muted-foreground"
+            }`}
+          >
+            {goal}
+          </span>
+          <span className="hidden sm:inline text-muted-foreground/60">|</span>
+          <span className="hidden sm:inline text-muted-foreground/70">
+            产能 {formatNum(crystalsPerSec)}/s
+          </span>
+          <a
+            href="https://git.atdunbg.xyz/Super_Z/echo-nexus"
+            target="_blank"
+            rel="noreferrer"
+            className="text-muted-foreground/60 hover:text-foreground transition ml-1"
+            aria-label="仓库"
+          >
+            <Github className="h-3.5 w-3.5" />
+          </a>
+        </div>
+      </footer>
+
+      <PrestigeDialog open={prestigeOpen} onOpenChange={setPrestigeOpen} />
+      <ConstellationDialog open={constellationOpen} onOpenChange={setConstellationOpen} />
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+      <AchievementNotifier />
+      <StarTideNotifier />
+    </div>
+  );
+}
+
+function StatsPanel() {
+  const s = useGameStore();
+  const achCount = Object.values(s.achievements).filter(Boolean).length;
+  const rows = [
+    { label: "累计解码晶体", value: `${s.totalDecoded} 颗` },
+    { label: "飞升周目", value: `${s.ascensions}` },
+    { label: "持有蓝图", value: `${s.blueprints.length} / 6` },
+    { label: "已学技术", value: `${Object.values(s.tech).filter((v) => v > 0).length} / ${TECH_TREE.length}` },
+    { label: "已获碎片", value: `${Object.values(s.fragments).filter(Boolean).length} / ${FRAGMENTS.length}` },
+    { label: "已解锁成就", value: `${achCount} / ${ACHIEVEMENTS.length}` },
+    { label: "星图天赋", value: `${s.constellation?.length ?? 0} / ${CONSTELLATION_PERKS.length}` },
+    { label: "接触进度", value: `${s.contact.toFixed(1)}%` },
+    { label: "晶体产能", value: `${s.crystalsPerSec.toFixed(2)} /s` },
+    { label: "仓库上限", value: `${formatNum(s.crystalCap)}` },
+    { label: "洞见倍率", value: `×${s.insightMult.toFixed(2)}` },
+    { label: "累计探险", value: `${s.totalExpeditions} 次` },
+    { label: "探险能量", value: `${Math.floor(s.energy)} / ${s.energyMax}` },
+  ];
+  return (
+    <div className="grid grid-cols-2 gap-1.5 text-xs">
+      {rows.map((r) => (
+        <div
+          key={r.label}
+          className="flex items-center justify-between rounded-md bg-black/25 border border-white/5 px-2 py-1.5"
+        >
+          <span className="text-muted-foreground">{r.label}</span>
+          <span className="font-mono text-foreground">{r.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/game/AchievementNotifier.tsx

@@ -0,0 +1,26 @@
+"use client";
+// 回响星核 / Echo Nexus — 成就解锁通知消费者
+import { useEffect } from "react";
+import { useGameStore } from "@/store/gameStore";
+import { useToast } from "@/hooks/use-toast";
+import { sfx } from "@/hooks/useAudio";
+
+export function AchievementNotifier() {
+  const queue = useGameStore((s) => s._achievementQueue);
+  const consume = useGameStore((s) => s.consumeAchievementQueue);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (queue.length === 0) return;
+    const items = consume();
+    for (const a of items) {
+      sfx("achievement");
+      toast({
+        title: `🏆 成就解锁：${a.name}`,
+        description: `${a.desc}　奖励：${a.rewardText}`,
+      });
+    }
+  }, [queue, consume, toast]);
+
+  return null;
+}

src/components/game/AchievementsPanel.tsx

@@ -0,0 +1,107 @@
+"use client";
+// 回响星核 / Echo Nexus — 成就系统面板
+import { useGameStore } from "@/store/gameStore";
+import { ACHIEVEMENTS } from "@/lib/game/achievements";
+import { achievementBonuses } from "@/lib/game/achievements";
+import { Trophy, Lock } from "lucide-react";
+
+export function AchievementsPanel() {
+  const achievements = useGameStore((s) => s.achievements);
+  const unlockedCount = Object.values(achievements).filter(Boolean).length;
+  const bonus = achievementBonuses(achievements);
+
+  return (
+    <div className="flex flex-col gap-2.5 h-full">
+      {/* 顶部：进度 + 加成总览 */}
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold flex items-center gap-1.5">
+          <Trophy className="h-4 w-4 text-amber-400" />
+          成就
+        </h3>
+        <span className="text-[10px] text-muted-foreground font-mono">
+          {unlockedCount} / {ACHIEVEMENTS.length}
+        </span>
+      </div>
+
+      {/* 永久加成条 */}
+      <div className="rounded-lg border border-amber-400/20 bg-amber-950/20 px-2.5 py-1.5 flex items-center gap-3 text-[10px]">
+        <span className="text-amber-300/80">永久加成</span>
+        {bonus.crystalsPerSecPct > 0 && (
+          <span className="text-emerald-300">产能 +{bonus.crystalsPerSecPct}%</span>
+        )}
+        {bonus.insightPct > 0 && (
+          <span className="text-fuchsia-300">洞见 +{bonus.insightPct}%</span>
+        )}
+        {bonus.crystalsPerSecPct === 0 && bonus.insightPct === 0 && (
+          <span className="text-muted-foreground/60">暂无（达成成就解锁）</span>
+        )}
+      </div>
+
+      {/* 成就网格 */}
+      <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-1.5 content-start overflow-y-auto echo-scroll pr-1 max-h-[300px]">
+        {ACHIEVEMENTS.map((a) => {
+          const unlocked = !!achievements[a.id];
+          return (
+            <div
+              key={a.id}
+              className={`relative rounded-lg border px-2.5 py-2 transition-all duration-300 overflow-hidden ${
+                unlocked
+                  ? "border-white/15 bg-black/30"
+                  : "border-white/5 bg-black/15 opacity-60"
+              }`}
+              style={
+                unlocked
+                  ? { boxShadow: `inset 0 0 16px ${a.color}11` }
+                  : undefined
+              }
+            >
+              {unlocked && (
+                <div
+                  className="absolute -top-6 -right-6 h-16 w-16 rounded-full blur-2xl opacity-40"
+                  style={{ background: a.color }}
+                />
+              )}
+              <div className="relative flex items-start gap-2">
+                {/* 图标徽章 */}
+                <div
+                  className="shrink-0 h-8 w-8 rounded-lg flex items-center justify-center text-base"
+                  style={{
+                    background: unlocked ? `${a.color}22` : "rgba(255,255,255,0.04)",
+                    border: `1px solid ${unlocked ? a.color + "55" : "rgba(255,255,255,0.08)"}`,
+                    color: unlocked ? a.color : "#666",
+                    boxShadow: unlocked ? `0 0 10px ${a.color}33` : "none",
+                  }}
+                >
+                  {unlocked ? a.icon : <Lock className="h-3.5 w-3.5" />}
+                </div>
+                {/* 文本 */}
+                <div className="min-w-0 flex-1">
+                  <div
+                    className="text-[11px] font-semibold truncate"
+                    style={{ color: unlocked ? a.color : "rgba(255,255,255,0.5)" }}
+                  >
+                    {a.name}
+                  </div>
+                  <div className="text-[10px] text-muted-foreground/80 leading-tight mt-0.5">
+                    {a.desc}
+                  </div>
+                  {unlocked && (
+                    <div className="text-[9px] mt-1 font-mono" style={{ color: a.color + "cc" }}>
+                      ✦ {a.rewardText}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <style jsx global>{`
+        .echo-scroll::-webkit-scrollbar { width: 5px; }
+        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
+        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
+      `}</style>
+    </div>
+  );
+}

src/components/game/Codex.tsx

@@ -0,0 +1,128 @@
+"use client";
+// 回响星核 / Echo Nexus — 记忆图谱（碎片叙事）
+import { useState } from "react";
+import { useGameStore, FRAGMENTS } from "@/store/gameStore";
+import { nextFragmentThreshold } from "@/store/gameStore";
+import { Card } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { BookOpen, Lock, Sparkles } from "lucide-react";
+import type { Fragment } from "@/lib/game/types";
+
+const ERA_NAMES = ["", "寂灭前夜", "谐振纪", "飞升潮", "回响纪", "接触纪"];
+
+export function Codex() {
+  const fragments = useGameStore((s) => s.fragments);
+  const totalDecoded = useGameStore((s) => s.totalDecoded);
+  const nextThreshold = nextFragmentThreshold(totalDecoded);
+  const [selected, setSelected] = useState<Fragment | null>(null);
+
+  // v0.1 只展示第一纪元
+  const era1 = FRAGMENTS.filter((f) => f.era === 1);
+  const unlockedCount = era1.filter((f) => fragments[f.id]).length;
+
+  return (
+    <div className="flex flex-col gap-2 h-full">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold flex items-center gap-1.5">
+          <BookOpen className="h-4 w-4 text-fuchsia-400" />
+          记忆图谱
+        </h3>
+        <span className="text-xs text-muted-foreground">
+          {unlockedCount}/{era1.length} · 第一纪元
+        </span>
+      </div>
+
+      {nextThreshold && (
+        <div className="text-[10px] text-muted-foreground/80 px-1">
+          再解码 <span className="text-fuchsia-300 font-mono">{nextThreshold - totalDecoded}</span> 颗 → 下一个碎片
+        </div>
+      )}
+
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="grid grid-cols-2 gap-2 pr-2">
+          {era1.map((f, i) => {
+            const unlocked = !!fragments[f.id];
+            return (
+              <button
+                key={f.id}
+                onClick={() => unlocked && setSelected(f)}
+                disabled={!unlocked}
+                className={`relative aspect-[4/3] rounded-xl border text-left p-2 transition-all duration-300 overflow-hidden ${
+                  unlocked
+                    ? "border-fuchsia-400/40 bg-gradient-to-br from-fuchsia-950/40 to-black/40 hover:border-fuchsia-400/70 hover:scale-[1.02] cursor-pointer"
+                    : "border-white/5 bg-black/30 cursor-not-allowed"
+                }`}
+                style={
+                  unlocked
+                    ? { boxShadow: "0 0 16px rgba(232,121,249,0.15)" }
+                    : undefined
+                }
+              >
+                {/* 编号 */}
+                <span
+                  className={`absolute top-1.5 right-1.5 text-[9px] font-mono ${
+                    unlocked ? "text-fuchsia-300/70" : "text-white/20"
+                  }`}
+                >
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                {unlocked ? (
+                  <>
+                    <div className="absolute -top-3 -right-3 h-12 w-12 rounded-full bg-fuchsia-500/20 blur-xl" />
+                    <Sparkles className="h-3 w-3 text-fuchsia-300 mb-1" />
+                    <div className="text-[11px] font-semibold text-fuchsia-100 leading-tight">
+                      {f.title}
+                    </div>
+                    <div className="text-[9px] text-muted-foreground mt-1 line-clamp-2">
+                      {f.echo.slice(0, 28)}…
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex flex-col items-center justify-center h-full gap-1">
+                    <Lock className="h-4 w-4 text-white/20" />
+                    <span className="text-[9px] text-white/30">
+                      需解码 {f.threshold} 颗
+                    </span>
+                  </div>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </ScrollArea>
+
+      {/* 详情弹层 */}
+      {selected && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
+          onClick={() => setSelected(null)}
+        >
+          <Card
+            className="max-w-md w-full p-5 bg-gradient-to-br from-fuchsia-950/60 to-black/80 border-fuchsia-400/40"
+            onClick={(e) => e.stopPropagation()}
+            style={{ boxShadow: "0 0 40px rgba(232,121,249,0.25)" }}
+          >
+            <div className="flex items-center gap-2 mb-3">
+              <Sparkles className="h-4 w-4 text-fuchsia-300" />
+              <span className="text-[10px] text-fuchsia-300/70 font-mono">
+                第 {selected.era} 纪元 · {ERA_NAMES[selected.era] || ""}
+              </span>
+            </div>
+            <h4 className="text-lg font-bold text-fuchsia-100 mb-3">
+              {selected.title}
+            </h4>
+            <p className="text-sm text-foreground/90 leading-relaxed italic">
+              「{selected.echo}」
+            </p>
+            <button
+              onClick={() => setSelected(null)}
+              className="mt-4 text-xs text-muted-foreground hover:text-foreground transition"
+            >
+              关闭
+            </button>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/game/ConstellationDialog.tsx

@@ -0,0 +1,179 @@
+"use client";
+// 回响星核 / Echo Nexus — 星图天赋选择对话框（飞升后弹出，3 选 1）
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { useGameStore } from "@/store/gameStore";
+import {
+  getPerk,
+  CONSTELLATION_CATEGORY_META,
+  constellationProgress,
+} from "@/lib/game/constellation";
+import { sfx } from "@/hooks/useAudio";
+import { Sparkles, RefreshCw } from "lucide-react";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}
+
+export function ConstellationDialog({ open, onOpenChange }: Props) {
+  const pendingChoices = useGameStore((s) => s.pendingPerkChoices);
+  const constellation = useGameStore((s) => s.constellation ?? []);
+  const choosePerk = useGameStore((s) => s.chooseConstellationPerk);
+  const reroll = useGameStore((s) => s.rerollPerkChoices);
+  const [picked, setPicked] = useState<string | null>(null);
+
+  // 关闭时清理本地状态
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    if (!open) setPicked(null);
+  }, [open]);
+
+  // 自动 open：当 pendingPerkChoices 存在且当前未 open 时
+  useEffect(() => {
+    if (pendingChoices && pendingChoices.length > 0 && !open) {
+      onOpenChange(true);
+    }
+    if ((!pendingChoices || pendingChoices.length === 0) && open) {
+      onOpenChange(false);
+    }
+  }, [pendingChoices, open, onOpenChange]);
+
+  const handlePick = (perkId: string) => {
+    setPicked(perkId);
+    const ok = choosePerk(perkId);
+    if (ok) {
+      sfx("constellation");
+      // 延迟关闭，让选中动画播放
+      setTimeout(() => onOpenChange(false), 500);
+    }
+  };
+
+  const handleReroll = () => {
+    reroll();
+    sfx("uiClick");
+  };
+
+  if (!pendingChoices || pendingChoices.length === 0) return null;
+
+  const progress = constellationProgress(constellation);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md border-fuchsia-400/30 bg-gradient-to-br from-[#0a0820]/95 to-[#1a0f30]/95 backdrop-blur-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-fuchsia-200">
+            <Sparkles className="h-4 w-4" />
+            星图觉醒
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground text-xs">
+            飞升带来的回响在星图上凝聚。从 3 道星辉中选择 1 道，永久获得其加成。
+            <br />
+            <span className="text-fuchsia-300/80">当前已觉醒 {progress.unlocked}/{progress.total}</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid grid-cols-1 gap-2 mt-1">
+          {pendingChoices.map((perkId) => {
+            const perk = getPerk(perkId);
+            if (!perk) return null;
+            const meta = CONSTELLATION_CATEGORY_META[perk.category];
+            const isPicked = picked === perkId;
+            return (
+              <button
+                key={perkId}
+                onClick={() => handlePick(perkId)}
+                disabled={!!picked}
+                className={`group relative w-full text-left rounded-lg border px-3 py-2.5 transition-all overflow-hidden ${
+                  isPicked
+                    ? "border-fuchsia-400/80 bg-fuchsia-500/10 scale-[1.02]"
+                    : picked
+                    ? "border-white/5 opacity-40"
+                    : "border-white/10 hover:border-white/30 hover:bg-white/5"
+                }`}
+                style={{
+                  boxShadow: isPicked ? `0 0 20px ${meta.glow}` : undefined,
+                }}
+              >
+                {/* 类别色条 */}
+                <div
+                  className="absolute left-0 top-0 bottom-0 w-1"
+                  style={{ background: meta.hex, boxShadow: `0 0 8px ${meta.hex}` }}
+                />
+                <div className="pl-2 flex items-start gap-3">
+                  {/* 类别图标 */}
+                  <div
+                    className="flex-shrink-0 mt-0.5 h-8 w-8 rounded-full flex items-center justify-center text-sm font-bold"
+                    style={{
+                      background: `${meta.hex}20`,
+                      color: meta.hex,
+                      border: `1px solid ${meta.hex}40`,
+                    }}
+                  >
+                    {meta.name.charAt(0)}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-0.5">
+                      <span className="text-sm font-bold text-foreground">{perk.name}</span>
+                      <span
+                        className="text-[9px] px-1 py-0.5 rounded font-mono"
+                        style={{
+                          background: `${meta.hex}20`,
+                          color: meta.hex,
+                        }}
+                      >
+                        {meta.name}
+                      </span>
+                    </div>
+                    <div className="text-[11px] text-muted-foreground">{perk.desc}</div>
+                  </div>
+                </div>
+                {/* 选中粒子动画 */}
+                {isPicked && (
+                  <div className="absolute inset-0 pointer-events-none">
+                    {[...Array(8)].map((_, i) => (
+                      <span
+                        key={i}
+                        className="absolute h-1 w-1 rounded-full animate-ping"
+                        style={{
+                          background: meta.hex,
+                          left: `${20 + i * 8}%`,
+                          top: `${30 + (i % 3) * 20}%`,
+                          animationDelay: `${i * 50}ms`,
+                          animationDuration: "800ms",
+                        }}
+                      />
+                    ))}
+                  </div>
+                )}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center justify-between mt-3 pt-2 border-t border-white/5">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleReroll}
+            disabled={!!picked}
+            className="text-muted-foreground hover:text-foreground h-7 text-[11px]"
+          >
+            <RefreshCw className="h-3 w-3 mr-1" />
+            重新抽取
+          </Button>
+          <span className="text-[10px] text-muted-foreground/60">
+            ✦ 选择后永久保留，跨周目生效
+          </span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/game/ConstellationPanel.tsx

@@ -0,0 +1,337 @@
+"use client";
+// 回响星核 / Echo Nexus — 星图天文台面板（飞升元进程可视化）
+// 6 个星座（六边形布局）× 3 颗星 = 18 个天赋节点，已解锁的星点亮 + 连线
+import { useEffect, useRef, useState, useMemo } from "react";
+import { useGameStore } from "@/store/gameStore";
+import {
+  CONSTELLATION_PERKS,
+  CONSTELLATION_CATEGORY_META,
+  getPerk,
+  constellationBonuses,
+  getConstellationLayout,
+  getStarsInCategory,
+  countUnlockedInCategory,
+  constellationProgress,
+  type ConstellationCategory,
+} from "@/lib/game/constellation";
+import type { ConstellationPerk } from "@/lib/game/constellation";
+
+interface StarPoint {
+  perk: ConstellationPerk;
+  x: number;
+  y: number;
+}
+
+interface HoverState {
+  perk: ConstellationPerk;
+  x: number;
+  y: number;
+  unlocked: boolean;
+}
+
+export function ConstellationPanel() {
+  const constellation = useGameStore((s) => s.constellation ?? []);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [size, setSize] = useState({ w: 360, h: 360 });
+  const [hover, setHover] = useState<HoverState | null>(null);
+  const ownedSet = useMemo(() => new Set(constellation), [constellation]);
+
+  // 自适应尺寸
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      const r = el.getBoundingClientRect();
+      setSize({ w: Math.max(280, r.width), h: Math.max(280, Math.min(420, r.width)) });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // 计算布局（中心点 + 半径）
+  const layout = useMemo(() => {
+    const cx = size.w / 2;
+    const cy = size.h / 2;
+    const radius = Math.min(size.w, size.h) * 0.32;
+    return { cx, cy, radius };
+  }, [size]);
+
+  // 收集所有星点 + 每个星座的星点列表
+  const clusters = useMemo(() => {
+    const centers = getConstellationLayout(layout.cx, layout.cy, layout.radius);
+    return centers.map((c) => {
+      const stars = getStarsInCategory(c.category, c.cx, c.cy, 1) as StarPoint[];
+      return { ...c, stars };
+    });
+  }, [layout]);
+
+  // 绘制
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = size.w * dpr;
+    canvas.height = size.h * dpr;
+    canvas.style.width = `${size.w}px`;
+    canvas.style.height = `${size.h}px`;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    let rafId = 0;
+    const start = performance.now();
+    const draw = (now: number) => {
+      const t = (now - start) / 1000;
+      ctx.clearRect(0, 0, size.w, size.h);
+      // 背景径向暗光
+      const bg = ctx.createRadialGradient(layout.cx, layout.cy, 0, layout.cx, layout.cy, layout.radius * 1.6);
+      bg.addColorStop(0, "rgba(40,30,80,0.18)");
+      bg.addColorStop(1, "rgba(5,4,16,0)");
+      ctx.fillStyle = bg;
+      ctx.fillRect(0, 0, size.w, size.h);
+
+      // 中心装饰：星核
+      ctx.save();
+      ctx.translate(layout.cx, layout.cy);
+      const coreR = 6 + Math.sin(t * 1.5) * 1.5;
+      const coreGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, coreR * 3);
+      coreGrad.addColorStop(0, "rgba(232,121,249,0.9)");
+      coreGrad.addColorStop(0.4, "rgba(232,121,249,0.3)");
+      coreGrad.addColorStop(1, "rgba(232,121,249,0)");
+      ctx.fillStyle = coreGrad;
+      ctx.beginPath();
+      ctx.arc(0, 0, coreR * 3, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.fillStyle = "#fce7ff";
+      ctx.beginPath();
+      ctx.arc(0, 0, coreR * 0.6, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+
+      // 连接星座到中心的虚线（已解锁 >=1 时）
+      for (const c of clusters) {
+        const cnt = countUnlockedInCategory(constellation, c.category);
+        if (cnt > 0) {
+          ctx.save();
+          ctx.strokeStyle = c.meta.glow;
+          ctx.lineWidth = 1;
+          ctx.setLineDash([2, 4]);
+          ctx.globalAlpha = 0.4 + Math.sin(t * 2 + c.cx) * 0.1;
+          ctx.beginPath();
+          ctx.moveTo(layout.cx, layout.cy);
+          ctx.lineTo(c.cx, c.cy);
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+
+      // 绘制每个星座
+      for (const c of clusters) {
+        const cnt = countUnlockedInCategory(constellation, c.category);
+        // 星座中心标签
+        ctx.save();
+        ctx.font = "10px ui-monospace, monospace";
+        ctx.textAlign = "center";
+        ctx.fillStyle = cnt > 0 ? c.meta.hex : "rgba(148,163,184,0.5)";
+        ctx.globalAlpha = 0.85;
+        ctx.fillText(c.meta.name, c.cx, c.cy + 38);
+        ctx.restore();
+
+        // 同星座内已解锁星点之间的连线
+        const unlockedStars = c.stars.filter((s) => ownedSet.has(s.perk.id));
+        if (unlockedStars.length >= 2) {
+          ctx.save();
+          ctx.strokeStyle = c.meta.glow;
+          ctx.lineWidth = 1.5;
+          ctx.globalAlpha = 0.6;
+          ctx.beginPath();
+          unlockedStars.forEach((s, i) => {
+            if (i === 0) ctx.moveTo(s.x, s.y);
+            else ctx.lineTo(s.x, s.y);
+          });
+          ctx.stroke();
+          ctx.restore();
+        }
+
+        // 绘制星点
+        for (const star of c.stars) {
+          const unlocked = ownedSet.has(star.perk.id);
+          ctx.save();
+          ctx.translate(star.x, star.y);
+          // 闪烁系数
+          const twinkle = unlocked ? 0.85 + Math.sin(t * 3 + star.x * 0.1) * 0.15 : 0.3;
+          // 外光晕
+          const haloR = unlocked ? 10 : 5;
+          const haloGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, haloR);
+          haloGrad.addColorStop(0, unlocked ? c.meta.glow : "rgba(100,116,139,0.2)");
+          haloGrad.addColorStop(1, "rgba(0,0,0,0)");
+          ctx.fillStyle = haloGrad;
+          ctx.globalAlpha = twinkle;
+          ctx.beginPath();
+          ctx.arc(0, 0, haloR, 0, Math.PI * 2);
+          ctx.fill();
+          // 核心
+          ctx.globalAlpha = unlocked ? 1 : 0.4;
+          ctx.fillStyle = unlocked ? c.meta.hex : "#475569";
+          ctx.beginPath();
+          ctx.arc(0, 0, unlocked ? 3.5 : 2, 0, Math.PI * 2);
+          ctx.fill();
+          // 解锁星点：4 道十字光线
+          if (unlocked) {
+            ctx.strokeStyle = c.meta.hex;
+            ctx.globalAlpha = 0.7 * twinkle;
+            ctx.lineWidth = 0.8;
+            const ray = 7 + Math.sin(t * 4 + star.y * 0.1) * 1.5;
+            ctx.beginPath();
+            ctx.moveTo(-ray, 0); ctx.lineTo(ray, 0);
+            ctx.moveTo(0, -ray); ctx.lineTo(0, ray);
+            ctx.stroke();
+          }
+          ctx.restore();
+        }
+      }
+
+      rafId = requestAnimationFrame(draw);
+    };
+    rafId = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(rafId);
+  }, [clusters, layout, size, constellation, ownedSet]);
+
+  // 鼠标交互：检测 hover
+  const handleMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    let best: HoverState | null = null;
+    let bestDist = 14;
+    for (const c of clusters) {
+      for (const star of c.stars) {
+        const d = Math.hypot(star.x - mx, star.y - my);
+        if (d < bestDist) {
+          bestDist = d;
+          best = {
+            perk: star.perk,
+            x: star.x,
+            y: star.y,
+            unlocked: ownedSet.has(star.perk.id),
+          };
+        }
+      }
+    }
+    setHover(best);
+  };
+  const handleLeave = () => setHover(null);
+
+  const progress = constellationProgress(constellation);
+
+  return (
+    <div ref={containerRef} className="flex flex-col gap-2 min-h-0 h-full">
+      {/* 顶部进度 */}
+      <div className="flex items-center justify-between text-[11px] px-1">
+        <div className="flex items-center gap-1.5">
+          <span className="text-fuchsia-300">✦</span>
+          <span className="text-muted-foreground">星图天赋</span>
+          <span className="font-mono text-foreground">
+            {progress.unlocked}/{progress.total}
+          </span>
+        </div>
+        <span className="text-muted-foreground/60 text-[10px]">每次飞升可解锁 1 个</span>
+      </div>
+
+      {/* Canvas 星图 */}
+      <div className="relative rounded-xl bg-black/30 border border-white/5 overflow-hidden flex-shrink-0">
+        <canvas
+          ref={canvasRef}
+          onMouseMove={handleMove}
+          onMouseLeave={handleLeave}
+          className="block cursor-pointer"
+        />
+        {/* Hover tooltip */}
+        {hover && (
+          <div
+            className="pointer-events-none absolute z-10 max-w-[200px] rounded-md bg-black/85 border border-white/10 px-2 py-1.5 text-[10px] leading-tight shadow-lg backdrop-blur-sm"
+            style={{
+              left: Math.min(hover.x + 12, size.w - 200),
+              top: Math.max(0, hover.y - 40),
+            }}
+          >
+            <div
+              className="font-bold mb-0.5"
+              style={{ color: CONSTELLATION_CATEGORY_META[hover.perk.category].hex }}
+            >
+              {hover.unlocked ? "★ " : "☆ "}
+              {hover.perk.name}
+            </div>
+            <div className="text-muted-foreground">{hover.perk.desc}</div>
+            <div className="text-muted-foreground/60 mt-0.5">
+              {CONSTELLATION_CATEGORY_META[hover.perk.category].name} · 序{hover.perk.order}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 类别图例 + 当前总修饰 */}
+      <div className="grid grid-cols-3 gap-1 text-[10px]">
+        {(Object.keys(CONSTELLATION_CATEGORY_META) as ConstellationCategory[]).map((cat) => {
+          const meta = CONSTELLATION_CATEGORY_META[cat];
+          const cnt = countUnlockedInCategory(constellation, cat);
+          const total = CONSTELLATION_PERKS.filter((p) => p.category === cat).length;
+          return (
+            <div
+              key={cat}
+              className="rounded-md bg-black/25 border border-white/5 px-1.5 py-1 flex items-center gap-1"
+              style={cnt > 0 ? { borderColor: `${meta.hex}40` } : undefined}
+            >
+              <span
+                className="inline-block h-1.5 w-1.5 rounded-full flex-shrink-0"
+                style={{ background: meta.hex, boxShadow: cnt > 0 ? `0 0 4px ${meta.hex}` : "none" }}
+              />
+              <span className="text-muted-foreground truncate">{meta.name}</span>
+              <span className="ml-auto font-mono" style={{ color: cnt > 0 ? meta.hex : "rgba(148,163,184,0.5)" }}>
+                {cnt}/{total}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 已解锁天赋列表 */}
+      <div className="flex-1 min-h-0 overflow-y-auto pr-1 echo-scrollbar">
+        {constellation.length === 0 ? (
+          <div className="rounded-md bg-black/25 border border-dashed border-white/10 px-3 py-3 text-center text-[11px] text-muted-foreground/70">
+            <div className="mb-1 text-fuchsia-300/80">✦</div>
+            尚未解锁任何天赋。<br />
+            累积接触进度至 100%，发起「飞升」即可在 3 个随机天赋中选 1。
+          </div>
+        ) : (
+          <div className="flex flex-col gap-1">
+            {constellation.map((id) => {
+              const perk = getPerk(id);
+              if (!perk) return null;
+              const meta = CONSTELLATION_CATEGORY_META[perk.category];
+              return (
+                <div
+                  key={id}
+                  className="rounded-md bg-black/25 border px-2 py-1.5 flex items-center gap-2 text-[11px]"
+                  style={{ borderColor: `${meta.hex}30` }}
+                >
+                  <span
+                    className="inline-block h-2 w-2 rounded-full flex-shrink-0"
+                    style={{ background: meta.hex, boxShadow: `0 0 6px ${meta.hex}` }}
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-foreground truncate">{perk.name}</div>
+                    <div className="text-muted-foreground/70 text-[10px] truncate">{perk.desc}</div>
+                  </div>
+                  <span className="text-[9px] text-muted-foreground/50 font-mono">{meta.name}</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/game/CrystalOrb.tsx

@@ -0,0 +1,255 @@
+"use client";
+// 回响星核 / Echo Nexus — 中央晶体集群 + 主动脉冲
+import { useRef, useState, useCallback } from "react";
+import { useGameStore } from "@/store/gameStore";
+import { formatNum } from "@/lib/game/config";
+import { useToast } from "@/hooks/use-toast";
+import { sfx } from "@/hooks/useAudio";
+
+interface FloatNum {
+  id: number;
+  x: number;
+  y: number;
+  text: string;
+  born: number;
+  color: string;
+}
+
+interface Particle {
+  id: number;
+  angle: number;
+  dist: number;
+  born: number;
+  color: string;
+}
+
+export function CrystalOrb() {
+  const pulse = useGameStore((s) => s.pulse);
+  const crystals = useGameStore((s) => s.crystals);
+  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
+  const crystalCap = useGameStore((s) => s.crystalCap);
+  const combo = useGameStore((s) => s._combo);
+  const { toast } = useToast();
+  const [floats, setFloats] = useState<FloatNum[]>([]);
+  const [particles, setParticles] = useState<Particle[]>([]);
+  const [pulseAnim, setPulseAnim] = useState(0);
+  const idRef = useRef(0);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      const res = pulse();
+      if (!res) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const id = idRef.current++;
+      const floatColor = res.combo >= 5 ? "#fbbf24" : res.combo >= 3 ? "#e879f9" : "#34d399";
+      setFloats((f) => [
+        ...f,
+        { id, x, y, text: `+${res.gain.toFixed(1)}`, born: Date.now(), color: floatColor },
+      ]);
+      // 粒子爆发
+      const newParticles: Particle[] = [];
+      const pcount = 6 + Math.min(6, res.combo);
+      for (let i = 0; i < pcount; i++) {
+        newParticles.push({
+          id: idRef.current++,
+          angle: (Math.PI * 2 * i) / pcount + Math.random() * 0.3,
+          dist: 0,
+          born: Date.now(),
+          color: floatColor,
+        });
+      }
+      setParticles((p) => [...p, ...newParticles]);
+      setPulseAnim((n) => n + 1);
+      // 音效
+      sfx(res.combo >= 3 ? "pulseCombo" : "pulse", { combo: res.combo });
+      setTimeout(() => {
+        setFloats((f) => f.filter((it) => it.id !== id));
+      }, 900);
+      setTimeout(() => {
+        setParticles((p) => p.filter((it) => !newParticles.includes(it)));
+      }, 700);
+      if (res.combo >= 5 && res.combo % 5 === 0) {
+        toast({
+          title: `×${res.combo} 连击！`,
+          description: "谐振叠加，产能飙升。",
+        });
+      }
+    },
+    [pulse, toast]
+  );
+
+  // 进度比例
+  const fillPct = Math.min(100, (crystals / Math.max(1, crystalCap)) * 100);
+
+  return (
+    <div className="relative flex flex-col items-center justify-center gap-4 select-none">
+      {/* 连击显示 */}
+      {combo > 1 && (
+        <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-rose-500/20 border border-rose-400/40 text-rose-200 text-xs font-mono animate-pulse">
+          ×{combo} 连击
+        </div>
+      )}
+
+      <button
+        onClick={handleClick}
+        className="relative h-52 w-52 sm:h-64 sm:w-64 rounded-full focus:outline-none group"
+        aria-label="脉冲扫描，获取记忆晶体"
+      >
+        {/* 外层光晕 */}
+        <div className="absolute inset-0 rounded-full bg-emerald-500/10 blur-2xl group-hover:bg-emerald-500/20 transition-colors" />
+        {/* 旋转外环 */}
+        <div
+          className="absolute inset-2 rounded-full border border-emerald-400/30"
+          style={{ animation: "echo-spin 18s linear infinite" }}
+        >
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-emerald-300 shadow-[0_0_8px_#34d399]" />
+          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 h-1.5 w-1.5 rounded-full bg-rose-300 shadow-[0_0_8px_#fb7185]" />
+        </div>
+        {/* 反向旋转内环 */}
+        <div
+          className="absolute inset-6 rounded-full border border-fuchsia-400/20 border-dashed"
+          style={{ animation: "echo-spin 24s linear infinite reverse" }}
+        />
+        {/* 进度填充环 */}
+        <svg className="absolute inset-0 -rotate-90" viewBox="0 0 100 100">
+          <circle
+            cx="50"
+            cy="50"
+            r="44"
+            fill="none"
+            stroke="rgba(255,255,255,0.06)"
+            strokeWidth="2"
+          />
+          <circle
+            cx="50"
+            cy="50"
+            r="44"
+            fill="none"
+            stroke="url(#echoGrad)"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeDasharray={`${2 * Math.PI * 44}`}
+            strokeDashoffset={`${2 * Math.PI * 44 * (1 - fillPct / 100)}`}
+            style={{ transition: "stroke-dashoffset 0.3s ease", filter: "drop-shadow(0 0 4px rgba(52,211,153,0.6))" }}
+          />
+          <defs>
+            <linearGradient id="echoGrad" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor="#34d399" />
+              <stop offset="50%" stopColor="#e879f9" />
+              <stop offset="100%" stopColor="#fb7185" />
+            </linearGradient>
+          </defs>
+        </svg>
+        {/* 脉冲扩散环（点击时） */}
+        <div
+          key={`ring-${pulseAnim}`}
+          className="absolute inset-8 rounded-full border-2 border-emerald-400/60 pointer-events-none"
+          style={{ animation: "echo-ring 0.7s ease-out forwards" }}
+        />
+        {/* 中央晶体 */}
+        <div
+          key={pulseAnim}
+          className="absolute inset-12 rounded-full flex items-center justify-center"
+          style={{ animation: "echo-ping 0.4s ease-out" }}
+        >
+          <div className="relative h-full w-full">
+            {/* 晶核 */}
+            <div
+              className="absolute inset-0 rounded-full"
+              style={{
+                background:
+                  "radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(52,211,153,0.7) 35%, rgba(232,121,249,0.5) 70%, rgba(251,113,133,0.3))",
+                boxShadow:
+                  "0 0 30px rgba(52,211,153,0.6), 0 0 60px rgba(232,121,249,0.4), inset 0 0 20px rgba(255,255,255,0.3)",
+              }}
+            />
+            {/* 高光 */}
+            <div className="absolute top-3 left-6 h-6 w-10 rounded-full bg-white/40 blur-sm rotate-[-20deg]" />
+            {/* 内部六边形纹理 */}
+            <div
+              className="absolute inset-4 rounded-full opacity-30"
+              style={{
+                backgroundImage:
+                  "repeating-linear-gradient(60deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 8px), repeating-linear-gradient(-60deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 8px)",
+              }}
+            />
+          </div>
+        </div>
+        {/* 粒子爆发 */}
+        {particles.map((p) => (
+          <span
+            key={p.id}
+            className="absolute left-1/2 top-1/2 rounded-full pointer-events-none"
+            style={{
+              width: 4,
+              height: 4,
+              background: p.color,
+              boxShadow: `0 0 6px ${p.color}`,
+              ["--angle" as string]: `${p.angle}rad`,
+              animation: "echo-burst 0.7s ease-out forwards",
+            }}
+          />
+        ))}
+        {/* 浮动数字 */}
+        {floats.map((f) => (
+          <span
+            key={f.id}
+            className="absolute pointer-events-none font-mono font-bold text-sm"
+            style={{
+              left: f.x,
+              top: f.y,
+              color: f.color,
+              transform: "translate(-50%, -50%)",
+              animation: "echo-float 0.9s ease-out forwards",
+              textShadow: `0 0 8px ${f.color}`,
+            }}
+          >
+            {f.text}
+          </span>
+        ))}
+      </button>
+
+      {/* 数值显示 */}
+      <div className="text-center">
+        <div className="text-2xl font-mono font-bold text-emerald-300" style={{ textShadow: "0 0 12px rgba(52,211,153,0.5)" }}>
+          {formatNum(crystals)}
+        </div>
+        <div className="text-xs text-muted-foreground mt-0.5">
+          记忆晶体 · {crystalsPerSec.toFixed(1)}/s · 上限 {formatNum(crystalCap)}
+        </div>
+        <div className="text-[11px] text-muted-foreground/70 mt-2">
+          点击晶体发起<span className="text-emerald-300">脉冲扫描</span>，连击叠加加成
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes echo-spin { to { transform: rotate(360deg); } }
+        @keyframes echo-ping {
+          0% { transform: scale(0.92); }
+          50% { transform: scale(1.04); }
+          100% { transform: scale(1); }
+        }
+        @keyframes echo-float {
+          0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+          100% { opacity: 0; transform: translate(-50%, -180%) scale(1.3); }
+        }
+        @keyframes echo-ring {
+          0% { transform: scale(0.8); opacity: 0.8; }
+          100% { transform: scale(1.6); opacity: 0; }
+        }
+        @keyframes echo-burst {
+          0% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle)));
+            opacity: 1;
+          }
+          100% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(80px) rotate(calc(-1 * var(--angle)));
+            opacity: 0;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

src/components/game/DecodeArray.tsx

@@ -0,0 +1,444 @@
+"use client";
+// 回响星核 / Echo Nexus — 解码共振谜题（核心原创玩法）
+//
+// 谐振序列：按目标颜色顺序点击四邻接节点，重建回路。
+import { useState } from "react";
+import { useGameStore } from "@/store/gameStore";
+import { useToast } from "@/hooks/use-toast";
+import { sfx } from "@/hooks/useAudio";
+import { COLOR_VISUAL } from "@/lib/game/config";
+import { isSolvable, canStartFrom } from "@/lib/game/decode";
+import type { DecodeNode, ResonanceColor } from "@/lib/game/types";
+import { Button } from "@/components/ui/button";
+import { RotateCcw, X, Sparkles, Check, Undo2, AlertTriangle } from "lucide-react";
+
+export function DecodeArray() {
+  const activePuzzle = useGameStore((s) => s.activePuzzle);
+  const clickNode = useGameStore((s) => s.clickNode);
+  const undoStep = useGameStore((s) => s.undoStep);
+  const retryPuzzle = useGameStore((s) => s.retryPuzzle);
+  const abandonPuzzle = useGameStore((s) => s.abandonPuzzle);
+  const { toast } = useToast();
+
+  const [hoverId, setHoverId] = useState<number | null>(null);
+  const [flash, setFlash] = useState<{ id: number; ok: boolean } | null>(null);
+  const [warned, setWarned] = useState(false);
+
+  if (!activePuzzle) return null;
+
+  const { grid, rows, cols, target, path, stepLimit, tier } = activePuzzle;
+  const currentTargetIdx = path.length;
+  const currentColor: ResonanceColor | undefined = target[currentTargetIdx];
+  // 当前局面是否仍可解（精确判定）
+  const stuck = path.length > 0 && path.length < target.length && !isSolvable(activePuzzle);
+
+  const handleNodeClick = (node: DecodeNode) => {
+    const res = clickNode(node.id);
+    if (res.ok && res.finished) {
+      setWarned(false);
+      sfx("decodeSuccess");
+      if (res.failReason) {
+        const ids = res.failReason.split(",").filter(Boolean);
+        if (ids.length) {
+          sfx("fragmentUnlock");
+          toast({
+            title: "✦ 记忆碎片浮现",
+            description: "新的回响被拼入图谱，前往「记忆图谱」查看。",
+          });
+        }
+      }
+      toast({
+        title: "谐振闭合！",
+        description: "晶体解码成功，记忆已释放。",
+      });
+      return;
+    }
+    if (!res.ok) {
+      sfx("decodeFail");
+      setFlash({ id: node.id, ok: false });
+      setTimeout(() => setFlash(null), 280);
+    } else {
+      sfx("decodeClick", { color: node.color });
+      setFlash({ id: node.id, ok: true });
+      setTimeout(() => setFlash(null), 280);
+      // 点击后若不可解，提示玩家撤销
+      if (res.solvable === false && !warned) {
+        setWarned(true);
+        toast({
+          title: "谐振受阻",
+          description: "此路不通，建议撤销上一步或重排。",
+        });
+      }
+      if (res.solvable === true) setWarned(false);
+    }
+  };
+
+  const handleUndo = () => {
+    undoStep();
+    setWarned(false);
+    setFlash(null);
+  };
+
+  const handleRetry = () => {
+    retryPuzzle();
+    setWarned(false);
+    setFlash(null);
+  };
+
+  // 计算节点位置（百分比）
+  const cellW = 100 / cols;
+  const cellH = 100 / rows;
+
+  // 路径线段
+  const pathNodes = path
+    .map((id) => grid.find((n) => n.id === id)!)
+    .filter(Boolean);
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      {/* 目标序列 */}
+      <div className="flex items-center justify-center gap-2 flex-wrap">
+        <span className="text-xs text-muted-foreground mr-1">目标谐振</span>
+        {target.map((c, i) => {
+          const done = i < currentTargetIdx;
+          const active = i === currentTargetIdx;
+          const v = COLOR_VISUAL[c];
+          return (
+            <div
+              key={i}
+              className={`relative h-9 w-9 rounded-full flex items-center justify-center transition-all duration-300 ${
+                done ? "opacity-30 scale-90" : ""
+              } ${active ? "scale-125 ring-2 ring-offset-2 ring-offset-background" : ""}`}
+              style={{
+                background: `radial-gradient(circle at 35% 30%, ${v.hex}, ${v.hex}aa 60%, ${v.hex}44)`,
+                boxShadow: active
+                  ? `0 0 18px ${v.glow}, 0 0 36px ${v.glow}`
+                  : `0 0 8px ${v.glow}`,
+                ["--tw-ring-color" as string]: v.hex,
+              }}
+            >
+              {done && <Check className="h-4 w-4 text-white" />}
+              {active && (
+                <span
+                  className="absolute -bottom-5 text-[10px] font-medium"
+                  style={{ color: v.hex }}
+                >
+                  下一个
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 节点阵列 */}
+      <div className="relative flex-1 min-h-[260px] rounded-2xl border border-white/10 bg-black/30 backdrop-blur-sm overflow-hidden">
+        {/* 背景网格线 */}
+        <div
+          className="absolute inset-0 opacity-20"
+          style={{
+            backgroundImage:
+              "linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)",
+            backgroundSize: `${cellW}% ${cellH}%`,
+          }}
+        />
+        {/* 路径线 SVG */}
+        <svg className="absolute inset-0 w-full h-full pointer-events-none">
+          {pathNodes.map((n, i) => {
+            if (i === 0) return null;
+            const prev = pathNodes[i - 1];
+            const x1 = (prev.col + 0.5) * cellW;
+            const y1 = (prev.row + 0.5) * cellH;
+            const x2 = (n.col + 0.5) * cellW;
+            const y2 = (n.row + 0.5) * cellH;
+            const v = COLOR_VISUAL[n.color];
+            return (
+              <line
+                key={i}
+                x1={`${x1}%`}
+                y1={`${y1}%`}
+                x2={`${x2}%`}
+                y2={`${y2}%`}
+                stroke={v.hex}
+                strokeWidth={2.5}
+                strokeLinecap="round"
+                style={{ filter: `drop-shadow(0 0 4px ${v.glow})` }}
+                className="echo-path-line"
+              />
+            );
+          })}
+        </svg>
+
+        {/* 节点 */}
+        {grid.map((node) => {
+          const v = COLOR_VISUAL[node.color];
+          const used = node.used;
+          const isCurrentTarget =
+            currentColor !== undefined && node.color === currentColor && !used;
+          // 选起点阶段：标记「可行起点」（选了之后仍可解），避免玩家踩死起点
+          const isViableStart =
+            path.length === 0 && isCurrentTarget && canStartFrom(activePuzzle, node.id);
+          // 选起点阶段：是目标色但选了会死局的起点（淡化提示）
+          const isDeadStart =
+            path.length === 0 && isCurrentTarget && !isViableStart;
+          const isHover = hoverId === node.id;
+          const isFlash = flash?.id === node.id;
+          const cx = (node.col + 0.5) * cellW;
+          const cy = (node.row + 0.5) * cellH;
+          return (
+            <button
+              key={node.id}
+              onClick={() => handleNodeClick(node)}
+              onMouseEnter={() => setHoverId(node.id)}
+              onMouseLeave={() => setHoverId(null)}
+              disabled={used}
+              className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full transition-all duration-200 focus:outline-none disabled:cursor-not-allowed"
+              style={{
+                left: `${cx}%`,
+                top: `${cy}%`,
+                width: `min(${100 / cols * 0.62}%, 56px)`,
+                aspectRatio: "1",
+                background: used
+                  ? "rgba(255,255,255,0.04)"
+                  : `radial-gradient(circle at 35% 30%, ${v.hex}, ${v.hex}cc 55%, ${v.hex}55)`,
+                boxShadow: used
+                  ? "inset 0 0 12px rgba(0,0,0,0.5)"
+                  : isViableStart
+                  ? `0 0 16px ${v.glow}, 0 0 32px ${v.glow}, inset 0 0 10px rgba(255,255,255,0.5)`
+                  : isCurrentTarget
+                  ? `0 0 10px ${v.glow}, 0 0 20px ${v.glow}, inset 0 0 6px rgba(255,255,255,0.3)`
+                  : `0 0 6px ${v.glow}`,
+                border: isViableStart
+                  ? `2px solid ${v.hex}`
+                  : isCurrentTarget
+                  ? `1.5px solid ${v.hex}aa`
+                  : "1px solid rgba(255,255,255,0.12)",
+                opacity: used ? 0.35 : isDeadStart ? 0.5 : 1,
+                transform: `translate(-50%, -50%) scale(${
+                  isHover && !used ? 1.12 : isFlash ? (flash?.ok ? 1.25 : 0.8) : 1
+                })`,
+                animation: isViableStart
+                  ? "echo-pulse 1.2s ease-in-out infinite"
+                  : isCurrentTarget && !isDeadStart
+                  ? "echo-pulse 1.6s ease-in-out infinite"
+                  : undefined,
+              }}
+              aria-label={`${v.label}色节点 ${node.row + 1}-${node.col + 1}`}
+            >
+              {!used && (
+                <span
+                  className="absolute inset-0 rounded-full"
+                  style={{
+                    background:
+                      "radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5), transparent 45%)",
+                  }}
+                />
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* 卡死提示横幅 */}
+      {stuck && (
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-rose-400/40 bg-rose-950/40 text-rose-200 text-xs animate-pulse">
+          <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+          <span>谐振受阻，此路已无解。</span>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={handleUndo}
+            className="h-6 px-2 ml-auto border-rose-400/50 text-rose-100 hover:bg-rose-500/20 text-[11px]"
+          >
+            <Undo2 className="h-3 w-3 mr-1" />
+            撤销
+          </Button>
+        </div>
+      )}
+
+      {/* 底栏：步数 + 操作 */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 text-xs">
+          <span className="text-muted-foreground">步数</span>
+          <span
+            className={`font-mono font-semibold ${
+              path.length >= stepLimit ? "text-rose-400" : "text-foreground"
+            }`}
+          >
+            {path.length} / {stepLimit}
+          </span>
+          <span className="ml-2 text-muted-foreground">T{tier}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleUndo}
+            disabled={path.length === 0}
+            className="h-7"
+          >
+            <Undo2 className="h-3.5 w-3.5 mr-1" />
+            撤销
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleRetry}
+            className="h-7"
+          >
+            <RotateCcw className="h-3.5 w-3.5 mr-1" />
+            重排
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              abandonPuzzle();
+              setFlash(null);
+              setWarned(false);
+            }}
+            className="h-7"
+          >
+            <X className="h-3.5 w-3.5 mr-1" />
+            放回
+          </Button>
+        </div>
+      </div>
+
+      {/* 规则提示 */}
+      <p className="text-[11px] text-muted-foreground/80 text-center leading-relaxed">
+        {path.length === 0
+          ? <>点击<span className="text-emerald-300">高亮</span>的可行起点开始，按目标顺序走<span className="text-emerald-300">相邻同色</span>节点；走错可<span className="text-rose-300">撤销</span>。</>
+          : <>按「目标谐振」顺序，点击<span className="text-emerald-300">上下左右相邻</span>的同色节点。每个节点仅可使用一次；走错可<span className="text-rose-300">撤销</span>。</>}
+      </p>
+
+      <style jsx global>{`
+        @keyframes echo-pulse {
+          0%, 100% { filter: brightness(1); }
+          50% { filter: brightness(1.4); }
+        }
+        @keyframes echo-line {
+          from { stroke-dashoffset: 100; }
+          to { stroke-dashoffset: 0; }
+        }
+        .echo-path-line {
+          stroke-dasharray: 100;
+          animation: echo-line 0.4s ease-out forwards;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+/** 解码面板的容器（带标题） */
+export function DecodePanel() {
+  const activePuzzle = useGameStore((s) => s.activePuzzle);
+  const pendingCrystals = useGameStore((s) => s.pendingCrystals);
+  const startDecode = useGameStore((s) => s.startDecode);
+  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
+  const crystalCap = useGameStore((s) => s.crystalCap);
+  const crystals = useGameStore((s) => s.crystals);
+
+  if (activePuzzle) {
+    return (
+      <div className="h-full flex flex-col">
+        <div className="flex items-center gap-2 mb-3">
+          <Sparkles className="h-4 w-4 text-rose-400" />
+          <h3 className="text-sm font-semibold">解码共振阵列</h3>
+        </div>
+        <div className="flex-1 min-h-0">
+          <DecodeArray />
+        </div>
+      </div>
+    );
+  }
+
+  // 无活跃谜题：展示待解码晶体队列
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-center gap-2 mb-3">
+        <Sparkles className="h-4 w-4 text-rose-400" />
+        <h3 className="text-sm font-semibold">待解码晶体</h3>
+        <span className="text-xs text-muted-foreground ml-auto">
+          产能 {crystalsPerSec.toFixed(1)}/s · {Math.floor(crystals)}/{Math.floor(crystalCap)}
+        </span>
+      </div>
+
+      {pendingCrystals.length === 0 ? (
+        <div className="flex-1 flex flex-col items-center justify-center text-center gap-3 rounded-2xl border border-dashed border-white/10 bg-black/20 p-6">
+          <div className="relative h-16 w-16">
+            <div className="absolute inset-0 rounded-full bg-rose-500/20 blur-xl animate-pulse" />
+            <div className="absolute inset-2 rounded-full border-2 border-rose-400/40 rotate-45" />
+            <div className="absolute inset-4 rounded-full bg-rose-500/30" />
+          </div>
+          <p className="text-sm text-muted-foreground">
+            晶体正在生成中…
+          </p>
+          <p className="text-xs text-muted-foreground/70 max-w-[220px]">
+            自治无人机每数秒回收一颗记忆晶体，点击下方晶体开启解码。
+          </p>
+        </div>
+      ) : (
+        <div className="flex-1 grid grid-cols-2 sm:grid-cols-3 gap-3 content-start max-h-[420px] overflow-y-auto echo-scroll pr-1">
+          {pendingCrystals.map((c) => (
+            <CrystalCard key={c.id} crystal={c} onClick={() => startDecode(c.id)} />
+          ))}
+        </div>
+      )}
+      <style jsx global>{`
+        .echo-scroll::-webkit-scrollbar { width: 6px; }
+        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
+        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
+      `}</style>
+    </div>
+  );
+}
+
+function CrystalCard({
+  crystal,
+  onClick,
+}: {
+  crystal: { id: string; tier: 1 | 2 | 3; value: number };
+  onClick: () => void;
+}) {
+  const tierColor =
+    crystal.tier === 1 ? "#34d399" : crystal.tier === 2 ? "#fbbf24" : "#e879f9";
+  const tierLabel = crystal.tier === 1 ? "常见" : crystal.tier === 2 ? "稀有" : "史诗";
+  return (
+    <button
+      onClick={onClick}
+      className="group relative aspect-square rounded-2xl border border-white/10 bg-black/40 hover:border-white/30 transition-all duration-300 hover:scale-[1.03] focus:outline-none overflow-hidden"
+      style={{ boxShadow: `inset 0 0 24px ${tierColor}22` }}
+    >
+      {/* 晶体图形 */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div
+          className="relative h-12 w-12 transition-transform duration-500 group-hover:rotate-180"
+          style={{ filter: `drop-shadow(0 0 12px ${tierColor}88)` }}
+        >
+          <div
+            className="absolute inset-0 rotate-45 rounded-md"
+            style={{
+              background: `linear-gradient(135deg, ${tierColor}, ${tierColor}66)`,
+              border: `1px solid ${tierColor}`,
+            }}
+          />
+          <div
+            className="absolute inset-2 rotate-45 rounded-sm"
+            style={{ background: `linear-gradient(135deg, rgba(255,255,255,0.5), transparent)` }}
+          />
+        </div>
+      </div>
+      {/* 标签 */}
+      <div className="absolute top-1.5 left-1.5 text-[10px] font-mono px-1.5 py-0.5 rounded bg-black/50" style={{ color: tierColor }}>
+        T{crystal.tier}
+      </div>
+      <div className="absolute bottom-1.5 right-1.5 text-[10px] text-white/70">
+        {tierLabel}
+      </div>
+      <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end justify-center pb-2">
+        <span className="text-[11px] font-medium text-white">解码 →</span>
+      </div>
+    </button>
+  );
+}

src/components/game/ExpeditionPanel.tsx

@@ -0,0 +1,360 @@
+"use client";
+// 回响星核 / Echo Nexus — 遗迹探险面板（v0.2 肉鸽系统）
+import { useState } from "react";
+import { useGameStore } from "@/store/gameStore";
+import { useToast } from "@/hooks/use-toast";
+import { sfx } from "@/hooks/useAudio";
+import { EXPEDITION_CONFIG, combatWinRate } from "@/lib/game/expedition";
+import { formatNum } from "@/lib/game/config";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import {
+  Swords,
+  Gem,
+  HelpCircle,
+  Puzzle,
+  Skull,
+  Heart,
+  Zap,
+  ChevronRight,
+  LogOut,
+  Rocket,
+  Sparkles,
+} from "lucide-react";
+import type { ExpeditionNodeType } from "@/lib/game/types";
+
+const NODE_META: Record<
+  ExpeditionNodeType,
+  { icon: React.ComponentType<{ className?: string }>; color: string; label: string; bg: string }
+> = {
+  combat: { icon: Swords, color: "#fb7185", label: "战斗", bg: "rgba(251,113,133,0.15)" },
+  treasure: { icon: Gem, color: "#fbbf24", label: "宝藏", bg: "rgba(251,191,36,0.15)" },
+  choice: { icon: HelpCircle, color: "#a5f3fc", label: "抉择", bg: "rgba(165,243,252,0.15)" },
+  puzzle: { icon: Puzzle, color: "#e879f9", label: "解谜", bg: "rgba(232,121,249,0.15)" },
+  rest: { icon: Heart, color: "#34d399", label: "休整", bg: "rgba(52,211,153,0.15)" },
+  boss: { icon: Skull, color: "#f43f5e", label: "BOSS", bg: "rgba(244,63,94,0.2)" },
+};
+
+export function ExpeditionPanel() {
+  const activeExpedition = useGameStore((s) => s.activeExpedition);
+  const energy = useGameStore((s) => s.energy);
+  const energyMax = useGameStore((s) => s.energyMax);
+  const lastEnergyTick = useGameStore((s) => s.lastEnergyTick);
+  const expeditionLog = useGameStore((s) => s.expeditionLog);
+  const totalExpeditions = useGameStore((s) => s.totalExpeditions);
+  const startExpedition = useGameStore((s) => s.startExpedition);
+  const resolveCurrentNode = useGameStore((s) => s.resolveCurrentNode);
+  const advanceNode = useGameStore((s) => s.advanceNode);
+  const abortExpedition = useGameStore((s) => s.abortExpedition);
+  const { toast } = useToast();
+  const [lastLog, setLastLog] = useState<string | null>(null);
+
+  // 能量恢复进度
+  const now = Date.now();
+  const regenMs = EXPEDITION_CONFIG.energyRegenSec * 1000;
+  const regenProgress = energy >= energyMax ? 100 : Math.min(100, ((now - lastEnergyTick) / regenMs) * 100);
+
+  const handleStart = () => {
+    const res = startExpedition();
+    if (!res.ok) {
+      toast({ title: "无法出发", description: res.reason, variant: "destructive" });
+    } else {
+      sfx("expeditionStart");
+      toast({ title: "探险队出发", description: "深入遗迹，谨慎前行。" });
+      setLastLog(null);
+    }
+  };
+
+  const handleResolve = () => {
+    const result = resolveCurrentNode();
+    if (!result) return;
+    setLastLog(result.log);
+    if (result.ended) {
+      if (result.endReason === "victory") sfx("expeditionVictory");
+      else sfx("expeditionDefeat");
+    } else {
+      sfx("expeditionNode");
+    }
+    toast({
+      title: result.ended
+        ? result.endReason === "victory" ? "✦ 探险胜利！" : "探险失败"
+        : "节点结算",
+      description: result.log,
+      variant: result.endReason === "defeat" ? "destructive" : "default",
+    });
+  };
+
+  const handleAdvance = () => {
+    advanceNode();
+    setLastLog(null);
+  };
+
+  const handleAbort = () => {
+    abortExpedition();
+    toast({ title: "探险队撤退", description: "保留已获奖励，安全返回。" });
+    setLastLog(null);
+  };
+
+  // ===== 无活跃探险：展示入口 =====
+  if (!activeExpedition || activeExpedition.finished) {
+    return (
+      <div className="flex flex-col gap-3 h-full">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold flex items-center gap-1.5">
+            <Rocket className="h-4 w-4 text-amber-400" />
+            遗迹探险
+          </h3>
+          <span className="text-[10px] text-muted-foreground">已探索 {totalExpeditions} 次</span>
+        </div>
+
+        {/* 能量条 */}
+        <div className="rounded-xl border border-amber-400/20 bg-amber-950/20 p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <div className="flex items-center gap-1.5">
+              <Zap className="h-3.5 w-3.5 text-amber-400" />
+              <span className="text-xs text-amber-200">探险能量</span>
+            </div>
+            <span className="text-xs font-mono text-amber-100">
+              {energy} / {energyMax}
+            </span>
+          </div>
+          {energy < energyMax ? (
+            <>
+              <Progress
+                value={regenProgress}
+                className="h-1.5 bg-black/40 [&>div]:bg-gradient-to-r [&>div]:from-amber-500 [&>div]:to-yellow-300"
+              />
+              <p className="text-[10px] text-muted-foreground/70 mt-1">
+                下一点能量约 {Math.ceil((regenMs - (now - lastEnergyTick)) / 1000)}s 后恢复
+              </p>
+            </>
+          ) : (
+            <p className="text-[10px] text-amber-300/80 mt-0.5">能量已满，可立即出发</p>
+          )}
+        </div>
+
+        {/* 出发按钮 */}
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-amber-400/20 bg-black/30 p-6 relative overflow-hidden">
+          <div className="absolute -top-10 -right-10 h-32 w-32 rounded-full bg-amber-500/10 blur-2xl" />
+          <div className="relative">
+            <div className="h-20 w-20 rounded-full bg-gradient-to-br from-amber-500/30 to-rose-500/20 flex items-center justify-center mx-auto" style={{ boxShadow: "0 0 30px rgba(251,191,36,0.3)" }}>
+              <Rocket className="h-9 w-9 text-amber-300" />
+            </div>
+          </div>
+          <div className="text-center space-y-1">
+            <p className="text-sm font-medium text-amber-100">深入以太遗迹</p>
+            <p className="text-[11px] text-muted-foreground/80 max-w-[220px]">
+              派出探险队进入程序化生成的遗迹路径，沿途遭遇战斗、宝藏、抉择与解谜，击败终点 BOSS 获取丰厚奖励。
+            </p>
+          </div>
+          <Button
+            onClick={handleStart}
+            disabled={energy < EXPEDITION_CONFIG.energyCost}
+            className="bg-gradient-to-r from-amber-600 to-rose-500 hover:from-amber-500 hover:to-rose-400 text-white border-0"
+          >
+            <Rocket className="h-4 w-4 mr-1.5" />
+            出发（消耗 {EXPEDITION_CONFIG.energyCost} 能量）
+          </Button>
+          {energy < EXPEDITION_CONFIG.energyCost && (
+            <p className="text-[10px] text-rose-300/80">能量不足，请等待恢复</p>
+          )}
+        </div>
+
+        {/* 探险日志 */}
+        {expeditionLog.length > 0 && (
+          <div className="rounded-xl border border-white/5 bg-black/20 p-2 max-h-32 overflow-y-auto echo-scroll">
+            <div className="text-[10px] text-muted-foreground/60 mb-1 px-1">最近探险记录</div>
+            {expeditionLog.slice(0, 4).map((entry, i) => (
+              <div key={i} className="text-[10px] text-muted-foreground/70 px-1 py-0.5 border-b border-white/5 last:border-0">
+                <span className="text-amber-300/60">›</span> {entry.result}
+                {entry.rewards && <span className="text-emerald-300/70 ml-1">{entry.rewards}</span>}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ===== 活跃探险：展示地图 + 事件 =====
+  const exp = activeExpedition;
+  const currentNode = exp.nodes[exp.currentNode];
+  const nodeMeta = NODE_META[currentNode.type];
+  const NodeIcon = nodeMeta.icon;
+  const hpPct = (exp.hp / exp.maxHp) * 100;
+  const pathProgress = ((exp.currentNode + (currentNode.cleared ? 1 : 0)) / exp.nodes.length) * 100;
+
+  return (
+    <div className="flex flex-col gap-2.5 h-full">
+      {/* 头部：生命 + 路径进度 */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5">
+          <Rocket className="h-3.5 w-3.5 text-amber-400" />
+          <span className="text-xs font-semibold">遗迹探险</span>
+          <span className="text-[10px] text-muted-foreground">第 {exp.currentNode + 1}/{exp.nodes.length} 节点</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] text-muted-foreground">探险力</span>
+          <span className="text-xs font-mono font-semibold text-amber-300">{exp.power}</span>
+        </div>
+      </div>
+
+      {/* 生命条 */}
+      <div>
+        <div className="flex items-center justify-between mb-0.5">
+          <div className="flex items-center gap-1">
+            <Heart className="h-3 w-3 text-rose-400" />
+            <span className="text-[10px] text-muted-foreground">探险队生命</span>
+          </div>
+          <span className={`text-[10px] font-mono ${hpPct < 30 ? "text-rose-400" : "text-foreground"}`}>
+            {exp.hp} / {exp.maxHp}
+          </span>
+        </div>
+        <Progress
+          value={hpPct}
+          className="h-1.5 bg-black/40 [&>div]:bg-gradient-to-r [&>div]:from-rose-500 [&>div]:to-emerald-400"
+        />
+      </div>
+
+      {/* 节点路径图 */}
+      <div className="rounded-xl border border-white/10 bg-black/30 p-2.5">
+        <div className="flex items-center gap-1 overflow-x-auto echo-scroll pb-1">
+          {exp.nodes.map((node, i) => {
+            const meta = NODE_META[node.type];
+            const Icon = meta.icon;
+            const isCurrent = i === exp.currentNode;
+            const isCleared = node.cleared;
+            const isPast = i < exp.currentNode;
+            return (
+              <div key={node.id} className="flex items-center shrink-0">
+                <div
+                  className={`relative h-9 w-9 rounded-lg flex items-center justify-center transition-all duration-300 ${
+                    isCurrent ? "scale-125" : ""
+                  }`}
+                  style={{
+                    background: isCleared || isPast ? "rgba(255,255,255,0.04)" : meta.bg,
+                    border: isCurrent ? `1.5px solid ${meta.color}` : "1px solid rgba(255,255,255,0.08)",
+                    boxShadow: isCurrent ? `0 0 12px ${meta.color}66` : "none",
+                  }}
+                  title={`${meta.label} · ${node.title}`}
+                >
+                  <Icon className={`h-4 w-4 ${isCleared || isPast ? "opacity-30" : ""}`} style={{ color: isCleared || isPast ? "#666" : meta.color }} />
+                  {isCleared && (
+                    <div className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-emerald-500/80 flex items-center justify-center">
+                      <span className="text-[8px] text-white">✓</span>
+                    </div>
+                  )}
+                </div>
+                {i < exp.nodes.length - 1 && (
+                  <ChevronRight className={`h-3 w-3 mx-0.5 ${isPast || (isCurrent && isCleared) ? "text-amber-400/60" : "text-white/15"}`} />
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="mt-1.5">
+          <Progress value={pathProgress} className="h-1 bg-black/40 [&>div]:bg-gradient-to-r [&>div]:from-amber-500 [&>div]:to-rose-400" />
+        </div>
+      </div>
+
+      {/* 当前节点事件卡 */}
+      <div
+        className="rounded-xl border p-3 relative overflow-hidden"
+        style={{
+          borderColor: `${nodeMeta.color}44`,
+          background: `linear-gradient(135deg, ${nodeMeta.color}11, rgba(0,0,0,0.4))`,
+          boxShadow: `0 0 20px ${nodeMeta.color}22`,
+        }}
+      >
+        <div className="absolute -top-8 -right-8 h-24 w-24 rounded-full blur-2xl" style={{ background: `${nodeMeta.color}22` }} />
+        <div className="relative">
+          <div className="flex items-center gap-2 mb-1.5">
+            <div
+              className="h-8 w-8 rounded-lg flex items-center justify-center"
+              style={{ background: nodeMeta.bg, border: `1px solid ${nodeMeta.color}44` }}
+            >
+              <NodeIcon className="h-4 w-4" style={{ color: nodeMeta.color }} />
+            </div>
+            <div>
+              <div className="flex items-center gap-1.5">
+                <span className="text-[10px] font-mono px-1.5 py-0.5 rounded" style={{ background: nodeMeta.bg, color: nodeMeta.color }}>
+                  {nodeMeta.label}
+                </span>
+                {currentNode.type === "combat" && (
+                  <span className="text-[10px] text-muted-foreground">
+                    胜率 {Math.round(combatWinRate(exp.power, currentNode.difficulty) * 100)}%
+                  </span>
+                )}
+                {currentNode.difficulty > 0 && (
+                  <span className="text-[10px] text-muted-foreground/60">难度 {currentNode.difficulty}</span>
+                )}
+              </div>
+              <h4 className="text-sm font-semibold mt-0.5" style={{ color: nodeMeta.color }}>
+                {currentNode.title}
+              </h4>
+            </div>
+          </div>
+          <p className="text-[11px] text-muted-foreground/90 leading-relaxed">
+            {currentNode.desc}
+          </p>
+
+          {/* 上次结算结果 */}
+          {lastLog && (
+            <div className="mt-2 px-2 py-1.5 rounded-lg bg-black/40 border border-white/10">
+              <p className="text-[11px] text-foreground/90">{lastLog}</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 操作按钮 */}
+      <div className="flex items-center gap-1.5">
+        {!currentNode.cleared ? (
+          <Button
+            onClick={handleResolve}
+            className="flex-1 bg-gradient-to-r from-amber-600 to-rose-500 hover:from-amber-500 hover:to-rose-400 text-white border-0 h-8"
+          >
+            <Sparkles className="h-3.5 w-3.5 mr-1" />
+            探索节点
+          </Button>
+        ) : exp.currentNode < exp.nodes.length - 1 ? (
+          <Button
+            onClick={handleAdvance}
+            className="flex-1 h-8"
+            variant="outline"
+          >
+            <ChevronRight className="h-3.5 w-3.5 mr-1" />
+            前进
+          </Button>
+        ) : (
+          <div className="flex-1 text-center text-xs text-emerald-300 py-1.5">探险已完成 ✓</div>
+        )}
+        <Button
+          onClick={handleAbort}
+          variant="ghost"
+          size="sm"
+          className="h-8 px-2 text-muted-foreground hover:text-rose-300"
+        >
+          <LogOut className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* 本次奖励累计 */}
+      <div className="flex items-center gap-2 text-[10px] px-1">
+        <span className="text-muted-foreground/60">本次已获：</span>
+        {exp.rewards.crystals > 0 && <span className="text-emerald-300">{formatNum(exp.rewards.crystals)}晶体</span>}
+        {exp.rewards.insights > 0 && <span className="text-amber-300">{exp.rewards.insights}洞见</span>}
+        {exp.rewards.contact > 0 && <span className="text-fuchsia-300">{exp.rewards.contact.toFixed(1)}接触</span>}
+        {(exp.rewards.crystals === 0 && exp.rewards.insights === 0) && (
+          <span className="text-muted-foreground/40">暂无</span>
+        )}
+      </div>
+
+      <style jsx global>{`
+        .echo-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
+        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
+        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
+      `}</style>
+    </div>
+  );
+}

src/components/game/PrestigeDialog.tsx

@@ -0,0 +1,168 @@
+"use client";
+// 回响星核 / Echo Nexus — 飞升（Prestige）对话框
+import { useGameStore } from "@/store/gameStore";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { RotateCcw, Sparkles, Star } from "lucide-react";
+import { PRESTIGE } from "@/lib/game/config";
+import { computeNewBlueprints, computePrestigeBonus } from "@/lib/game/engine";
+import { constellationProgress } from "@/lib/game/constellation";
+import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
+import { sfx } from "@/hooks/useAudio";
+
+export function PrestigeDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const state = useGameStore();
+  const doPrestige = useGameStore((s) => s.doPrestige);
+  const { toast } = useToast();
+  const [confirming, setConfirming] = useState(false);
+
+  const newBp = computeNewBlueprints(state);
+  const bonus = computePrestigeBonus(state);
+  const totalBpAfter = Math.min(PRESTIGE.maxBlueprints, state.blueprints.length + newBp);
+  const cProgress = constellationProgress(state.constellation ?? []);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gradient-to-br from-fuchsia-950/70 to-black/90 border-fuchsia-400/40">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-fuchsia-100">
+            <RotateCcw className="h-5 w-5" />
+            飞升 · 跨越维度
+          </DialogTitle>
+          <DialogDescription className="text-fuchsia-200/70">
+            当接触进度满溢，你将跨越维度与以太族相会。本次飞升将重置资源与技术，但保留记忆图谱与蓝图加成。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 py-2">
+          {/* 本次飞升获得 */}
+          <div className="rounded-lg border border-fuchsia-400/30 bg-fuchsia-950/30 p-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-fuchsia-200">本次获得蓝图</span>
+              <span className="text-2xl font-mono font-bold text-fuchsia-100">
+                +{newBp}
+              </span>
+            </div>
+            <p className="text-[11px] text-muted-foreground mt-1">
+              蓝图总数将达 {totalBpAfter}/{PRESTIGE.maxBlueprints}（每 {PRESTIGE.blueprintsPerDecode} 次解码产出 1 张）
+            </p>
+          </div>
+
+          {/* 永久加成 */}
+          <div className="grid grid-cols-3 gap-2">
+            <BonusCard
+              label="产能"
+              value={`+${(totalBpAfter * PRESTIGE.perBlueprint.crystalsPerSecMult * 100).toFixed(0)}%`}
+              color="#34d399"
+            />
+            <BonusCard
+              label="洞见"
+              value={`+${(totalBpAfter * PRESTIGE.perBlueprint.insightMult * 100).toFixed(0)}%`}
+              color="#fbbf24"
+            />
+            <BonusCard
+              label="接触"
+              value={`+${(totalBpAfter * PRESTIGE.perBlueprint.contactRateMult * 100).toFixed(0)}%`}
+              color="#e879f9"
+            />
+          </div>
+
+          {/* 保留 / 重置 */}
+          <div className="text-[11px] text-muted-foreground space-y-1 pt-1">
+            <div className="flex items-center gap-1.5">
+              <Sparkles className="h-3 w-3 text-fuchsia-400" />
+              保留：记忆图谱、累计解码数、飞升次数、蓝图、星图天赋
+            </div>
+            <div className="flex items-center gap-1.5">
+              <RotateCcw className="h-3 w-3 text-rose-400" />
+              重置：晶体、洞见、技术树、接触进度、待解码晶体
+            </div>
+          </div>
+
+          {/* 星图觉醒预告 */}
+          <div className="rounded-lg border border-fuchsia-400/30 bg-gradient-to-r from-fuchsia-950/40 to-purple-950/40 p-2.5">
+            <div className="flex items-center gap-2">
+              <Star className="h-4 w-4 text-fuchsia-300" />
+              <div className="flex-1">
+                <div className="text-[12px] text-fuchsia-200 font-bold">星图觉醒预告</div>
+                <div className="text-[10px] text-muted-foreground">
+                  飞升后将从 3 道随机天赋中选 1，永久获得加成
+                  {cProgress.unlocked < cProgress.total && (
+                    <span className="text-fuchsia-300/80"> · 当前 {cProgress.unlocked}/{cProgress.total}</span>
+                  )}
+                </div>
+              </div>
+              <div className="text-[10px] text-fuchsia-300/70 font-mono">
+                {cProgress.unlocked < cProgress.total ? "✦ 可觉醒" : "✧ 已圆满"}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button
+            disabled={newBp <= 0 || confirming}
+            onClick={() => {
+              if (!confirming) {
+                setConfirming(true);
+                return;
+              }
+              const res = doPrestige();
+              onOpenChange(false);
+              setConfirming(false);
+              if (res) {
+                sfx("prestige");
+                toast({
+                  title: "✦ 飞升成功",
+                  description: `获得 ${res.newBp} 张蓝图，进入第 ${state.ascensions + 2} 周目。`,
+                });
+              }
+            }}
+            className="bg-gradient-to-r from-fuchsia-600 to-rose-500 hover:from-fuchsia-500 hover:to-rose-400 text-white border-0"
+          >
+            {confirming ? "再次确认飞升" : newBp <= 0 ? "无新蓝图" : "飞升"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function BonusCard({
+  label,
+  value,
+  color,
+}: {
+  label: string;
+  value: string;
+  color: string;
+}) {
+  return (
+    <div
+      className="rounded-lg border p-2 text-center"
+      style={{ borderColor: `${color}44`, background: `${color}11` }}
+    >
+      <div className="text-[10px] text-muted-foreground">{label}</div>
+      <div className="text-sm font-mono font-bold" style={{ color }}>
+        {value}
+      </div>
+    </div>
+  );
+}

src/components/game/ResourceBar.tsx

@@ -0,0 +1,98 @@
+"use client";
+// 回响星核 / Echo Nexus — 顶栏资源栏
+import { useGameStore } from "@/store/gameStore";
+import { formatNum, PRESTIGE } from "@/lib/game/config";
+import { Gem, Lightbulb, Waves, RotateCcw } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+
+export function ResourceBar({ onPrestige }: { onPrestige: () => void }) {
+  const crystals = useGameStore((s) => s.crystals);
+  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
+  const insights = useGameStore((s) => s.insights);
+  const contact = useGameStore((s) => s.contact);
+  const ascensions = useGameStore((s) => s.ascensions);
+  const blueprints = useGameStore((s) => s.blueprints);
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 sm:gap-3 px-3 py-2.5 rounded-2xl border border-white/10 bg-black/40 backdrop-blur-md">
+      {/* 晶体 */}
+      <Stat
+        icon={<Gem className="h-4 w-4 text-emerald-400" />}
+        label="记忆晶体"
+        value={formatNum(crystals)}
+        sub={`+${crystalsPerSec.toFixed(1)}/s`}
+        glow="rgba(52,211,153,0.4)"
+      />
+      <div className="h-8 w-px bg-white/10 hidden sm:block" />
+      {/* 洞见 */}
+      <Stat
+        icon={<Lightbulb className="h-4 w-4 text-amber-400" />}
+        label="技术洞见"
+        value={formatNum(insights)}
+        sub="解码产出"
+        glow="rgba(251,191,36,0.4)"
+      />
+      <div className="h-8 w-px bg-white/10 hidden sm:block" />
+      {/* 接触进度 */}
+      <div className="flex-1 min-w-[180px] flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Waves className="h-4 w-4 text-fuchsia-400" />
+          <span className="text-xs text-muted-foreground">接触进度</span>
+          <span className="text-xs font-mono font-semibold text-fuchsia-300 ml-auto">
+            {contact.toFixed(1)}%
+          </span>
+          {contact >= 100 && (
+            <button
+              onClick={onPrestige}
+              className="text-[10px] px-2 py-0.5 rounded-full bg-fuchsia-500/20 border border-fuchsia-400/50 text-fuchsia-200 hover:bg-fuchsia-500/30 transition animate-pulse"
+            >
+              飞升
+            </button>
+          )}
+        </div>
+        <Progress
+          value={contact}
+          className="h-1.5 bg-white/10 [&>div]:bg-gradient-to-r [&>div]:from-fuchsia-500 [&>div]:to-rose-400"
+        />
+      </div>
+      <div className="h-8 w-px bg-white/10 hidden sm:block" />
+      {/* 飞升 */}
+      <div className="flex items-center gap-2">
+        <RotateCcw className="h-4 w-4 text-rose-400" />
+        <div className="flex flex-col">
+          <span className="text-[10px] text-muted-foreground leading-none">飞升</span>
+          <span className="text-sm font-mono font-semibold leading-none mt-0.5">
+            {ascensions} <span className="text-amber-300 text-xs">×{blueprints.length}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Stat({
+  icon,
+  label,
+  value,
+  sub,
+  glow,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  sub: string;
+  glow: string;
+}) {
+  return (
+    <div className="flex items-center gap-2" style={{ filter: `drop-shadow(0 0 6px ${glow})` }}>
+      {icon}
+      <div className="flex flex-col">
+        <span className="text-[10px] text-muted-foreground leading-none">{label}</span>
+        <div className="flex items-baseline gap-1.5">
+          <span className="text-sm font-mono font-semibold leading-none mt-0.5">{value}</span>
+          <span className="text-[10px] text-muted-foreground/80">{sub}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/game/SettingsDialog.tsx

@@ -0,0 +1,131 @@
+"use client";
+// 回响星核 / Echo Nexus — 设置对话框
+import { useGameStore } from "@/store/gameStore";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { Trash2, Github, AlertTriangle, Volume2 } from "lucide-react";
+import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
+import { sfx } from "@/hooks/useAudio";
+
+export function SettingsDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const soundOn = useGameStore((s) => s.soundOn);
+  const toggleSound = useGameStore((s) => s.toggleSound);
+  const hardReset = useGameStore((s) => s.hardReset);
+  const ascensions = useGameStore((s) => s.ascensions);
+  const totalDecoded = useGameStore((s) => s.totalDecoded);
+  const { toast } = useToast();
+  const [confirmReset, setConfirmReset] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gradient-to-br from-slate-900/80 to-black/90 border-white/15">
+        <DialogHeader>
+          <DialogTitle>设置</DialogTitle>
+          <DialogDescription>游戏偏好与存档管理</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* 音效 */}
+          <div className="flex items-center justify-between rounded-lg border border-white/10 bg-black/30 p-3">
+            <div>
+              <Label className="text-sm">音效反馈</Label>
+              <p className="text-[11px] text-muted-foreground mt-0.5">
+                脉冲、解码、探险、飞升等程序化音效
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-7 px-2 text-muted-foreground hover:text-foreground"
+                onClick={() => sfx("decodeSuccess")}
+                aria-label="试听音效"
+              >
+                <Volume2 className="h-3.5 w-3.5" />
+              </Button>
+              <Switch checked={soundOn} onCheckedChange={toggleSound} />
+            </div>
+          </div>
+
+          {/* 存档信息 */}
+          <div className="rounded-lg border border-white/10 bg-black/30 p-3 text-xs space-y-1.5">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">累计解码</span>
+              <span className="font-mono">{totalDecoded} 颗</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">飞升周目</span>
+              <span className="font-mono">{ascensions}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">存档位置</span>
+              <span className="font-mono text-[10px]">浏览器本地</span>
+            </div>
+          </div>
+
+          {/* 危险操作 */}
+          <div className="rounded-lg border border-rose-500/30 bg-rose-950/20 p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <AlertTriangle className="h-4 w-4 text-rose-400" />
+              <span className="text-sm font-medium text-rose-200">危险操作</span>
+            </div>
+            <p className="text-[11px] text-muted-foreground mb-2">
+              清空所有进度，包括记忆图谱与飞升记录，不可恢复。
+            </p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-rose-500/40 text-rose-300 hover:bg-rose-500/10"
+              onClick={() => {
+                if (!confirmReset) {
+                  setConfirmReset(true);
+                  return;
+                }
+                hardReset();
+                setConfirmReset(false);
+                onOpenChange(false);
+                toast({ title: "存档已清空", description: "一切归零，重新开始。" });
+              }}
+            >
+              <Trash2 className="h-3.5 w-3.5 mr-1" />
+              {confirmReset ? "再次点击确认清空" : "清空存档"}
+            </Button>
+          </div>
+
+          {/* 仓库链接 */}
+          <a
+            href="https://git.atdunbg.xyz/Super_Z/echo-nexus"
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition px-1"
+          >
+            <Github className="h-3.5 w-3.5" />
+            git.atdunbg.xyz/Super_Z/echo-nexus
+          </a>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            关闭
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/game/StarTide.tsx

@@ -0,0 +1,130 @@
+"use client";
+// 回响星核 / Echo Nexus — 星潮事件 UI（横幅 + 通知 + 背景叠层）
+import { useEffect, useState } from "react";
+import { useGameStore } from "@/store/gameStore";
+import { useToast } from "@/hooks/use-toast";
+import { sfx } from "@/hooks/useAudio";
+import { TIDE_EVENTS, TIDE_CONFIG } from "@/lib/game/starTide";
+
+/** 星潮事件通知消费者：监听 _tideEvents 队列，弹 Toast + 播音效 */
+export function StarTideNotifier() {
+  const events = useGameStore((s) => s._tideEvents);
+  const consume = useGameStore((s) => s.consumeTideEvents);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (events.length === 0) return;
+    const items = consume();
+    for (const ev of items) {
+      if (ev.started) {
+        const meta = TIDE_EVENTS[ev.started];
+        sfx("tideStart");
+        toast({
+          title: `${meta.icon} 星潮降临：${meta.name}`,
+          description: meta.desc,
+        });
+      }
+      if (ev.ended) {
+        const meta = TIDE_EVENTS[ev.ended];
+        if (ev.silenceCompensation && ev.silenceCompensation > 0) {
+          sfx("techBuy");
+          toast({
+            title: `${meta.icon} 寂静期消散`,
+            description: `虚空回赠 ${ev.silenceCompensation} 洞见。`,
+          });
+        } else {
+          sfx("tideEnd");
+          toast({
+            title: `${meta.icon} ${meta.name}结束`,
+            description: "星潮退去，物理法则恢复。",
+          });
+        }
+      }
+    }
+  }, [events, consume, toast]);
+
+  return null;
+}
+
+/** 顶部星潮指示器（活跃时显示倒计时芯片） */
+export function StarTideIndicator() {
+  const activeTide = useGameStore((s) => s.activeTide);
+  const [, force] = useState(0);
+
+  // 每秒刷新倒计时
+  useEffect(() => {
+    if (!activeTide) return;
+    const id = setInterval(() => force((n) => n + 1), 500);
+    return () => clearInterval(id);
+  }, [activeTide]);
+
+  if (!activeTide) return null;
+  const meta = TIDE_EVENTS[activeTide.type];
+  const remaining = Math.max(0, activeTide.endsAt - Date.now());
+  const secs = Math.ceil(remaining / 1000);
+  const progress = 1 - remaining / TIDE_CONFIG.duration;
+
+  return (
+    <div
+      className="flex items-center gap-1.5 px-2 py-1 rounded-full text-[10px] font-medium relative overflow-hidden"
+      style={{
+        background: `${meta.color}1a`,
+        border: `1px solid ${meta.color}55`,
+        color: meta.color,
+        boxShadow: `0 0 10px ${meta.glow}`,
+      }}
+      title={meta.desc}
+    >
+      {/* 进度环背景 */}
+      <div
+        className="absolute inset-0 opacity-20"
+        style={{
+          background: `linear-gradient(90deg, ${meta.color}40 ${progress * 100}%, transparent ${progress * 100}%)`,
+        }}
+      />
+      <span className="relative text-xs leading-none">{meta.icon}</span>
+      <span className="relative leading-none">{meta.name}</span>
+      <span className="relative font-mono leading-none opacity-80">{secs}s</span>
+    </div>
+  );
+}
+
+/** 全屏背景叠层：活跃星潮时给页面罩一层对应色的微光 */
+export function StarTideOverlay() {
+  const activeTide = useGameStore((s) => s.activeTide);
+  if (!activeTide) return null;
+  const meta = TIDE_EVENTS[activeTide.type];
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-0 transition-opacity duration-1000">
+      {/* 顶部色带 */}
+      <div
+        className="absolute top-0 left-0 right-0 h-24 opacity-40"
+        style={{
+          background: `linear-gradient(180deg, ${meta.color}22, transparent)`,
+        }}
+      />
+      {/* 底部色带 */}
+      <div
+        className="absolute bottom-0 left-0 right-0 h-24 opacity-40"
+        style={{
+          background: `linear-gradient(0deg, ${meta.color}22, transparent)`,
+        }}
+      />
+      {/* 边缘呼吸光 */}
+      <div
+        className="absolute inset-0"
+        style={{
+          boxShadow: `inset 0 0 120px ${meta.glow}`,
+          animation: "tide-breathe 3s ease-in-out infinite",
+        }}
+      />
+      <style jsx>{`
+        @keyframes tide-breathe {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 0.9; }
+        }
+      `}</style>
+    </div>
+  );
+}

src/components/game/StarfieldCanvas.tsx

@@ -0,0 +1,181 @@
+"use client";
+// 回响星核 / Echo Nexus — 深空星空背景 Canvas
+import { useEffect, useRef } from "react";
+
+interface Star {
+  x: number;
+  y: number;
+  z: number; // 深度 0-1
+  r: number;
+  tw: number; // 闪烁相位
+  hue: number;
+}
+
+interface Dust {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  life: number;
+  maxLife: number;
+  color: string;
+}
+
+export function StarfieldCanvas({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let w = 0;
+    let h = 0;
+    let dpr = 1;
+    let stars: Star[] = [];
+    const dust: Dust[] = [];
+    let raf = 0;
+    let lastT = performance.now();
+
+    const palette = ["#34d399", "#fb7185", "#fbbf24", "#e879f9", "#a5f3fc"];
+
+    function resize() {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      w = canvas!.clientWidth;
+      h = canvas!.clientHeight;
+      canvas!.width = Math.floor(w * dpr);
+      canvas!.height = Math.floor(h * dpr);
+      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
+      // 生成星星：密度随面积
+      const count = Math.min(220, Math.floor((w * h) / 7000));
+      stars = Array.from({ length: count }, () => ({
+        x: Math.random() * w,
+        y: Math.random() * h,
+        z: Math.random(),
+        r: Math.random() * 1.4 + 0.2,
+        tw: Math.random() * Math.PI * 2,
+        hue: Math.random() < 0.15 ? Math.floor(Math.random() * palette.length) : -1,
+      }));
+    }
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(canvas);
+
+    function spawnDust() {
+      if (dust.length > 60) return;
+      const color = palette[Math.floor(Math.random() * palette.length)];
+      dust.push({
+        x: Math.random() * w,
+        y: h + 10,
+        vx: (Math.random() - 0.5) * 0.3,
+        vy: -(Math.random() * 0.5 + 0.2),
+        life: 0,
+        maxLife: 600 + Math.random() * 800,
+        color,
+      });
+    }
+
+    function draw(t: number) {
+      const dt = t - lastT;
+      lastT = t;
+      // 背景渐变
+      const g = ctx!.createRadialGradient(w * 0.5, h * 0.4, 0, w * 0.5, h * 0.5, Math.max(w, h) * 0.8);
+      g.addColorStop(0, "#1a0f2e");
+      g.addColorStop(0.45, "#0d0a1f");
+      g.addColorStop(1, "#050410");
+      ctx!.fillStyle = g;
+      ctx!.fillRect(0, 0, w, h);
+
+      // 星云团块
+      ctx!.globalCompositeOperation = "screen";
+      for (let i = 0; i < 3; i++) {
+        const cx = w * (0.2 + i * 0.3) + Math.sin(t / 9000 + i) * 40;
+        const cy = h * (0.3 + (i % 2) * 0.4) + Math.cos(t / 11000 + i) * 30;
+        const rad = Math.max(80, Math.min(w, h) * (0.25 + i * 0.05));
+        const ng = ctx!.createRadialGradient(cx, cy, 0, cx, cy, rad);
+        const col = i === 0 ? "rgba(232,121,249,0.10)" : i === 1 ? "rgba(52,211,153,0.08)" : "rgba(251,113,133,0.08)";
+        ng.addColorStop(0, col);
+        ng.addColorStop(1, "rgba(0,0,0,0)");
+        ctx!.fillStyle = ng;
+        ctx!.beginPath();
+        ctx!.arc(cx, cy, rad, 0, Math.PI * 2);
+        ctx!.fill();
+      }
+      ctx!.globalCompositeOperation = "source-over";
+
+      // 星星
+      for (const s of stars) {
+        s.tw += 0.02 + s.z * 0.04;
+        const alpha = 0.4 + Math.sin(s.tw) * 0.35 + s.z * 0.3;
+        if (s.hue >= 0) {
+          ctx!.fillStyle = palette[s.hue];
+          ctx!.globalAlpha = Math.max(0, Math.min(1, alpha));
+          ctx!.beginPath();
+          ctx!.arc(s.x, s.y, s.r * 1.6, 0, Math.PI * 2);
+          ctx!.fill();
+          // 光晕
+          ctx!.globalAlpha = Math.max(0, Math.min(1, alpha * 0.25));
+          ctx!.beginPath();
+          ctx!.arc(s.x, s.y, s.r * 4, 0, Math.PI * 2);
+          ctx!.fill();
+        } else {
+          ctx!.fillStyle = `rgba(220,230,255,${Math.max(0, Math.min(1, alpha))})`;
+          ctx!.beginPath();
+          ctx!.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+          ctx!.fill();
+        }
+        // 缓慢漂移
+        s.y += 0.02 + s.z * 0.05;
+        if (s.y > h + 2) {
+          s.y = -2;
+          s.x = Math.random() * w;
+        }
+      }
+      ctx!.globalAlpha = 1;
+
+      // 偶尔生成星尘
+      if (Math.random() < 0.04) spawnDust();
+      // 星尘
+      ctx!.globalCompositeOperation = "screen";
+      for (let i = dust.length - 1; i >= 0; i--) {
+        const d = dust[i];
+        d.life += dt;
+        d.x += d.vx * dt * 0.06;
+        d.y += d.vy * dt * 0.06;
+        if (d.life > d.maxLife || d.y < -10) {
+          dust.splice(i, 1);
+          continue;
+        }
+        const a = Math.sin((d.life / d.maxLife) * Math.PI) * 0.7;
+        ctx!.fillStyle = d.color;
+        ctx!.globalAlpha = a;
+        ctx!.beginPath();
+        ctx!.arc(d.x, d.y, 1.6, 0, Math.PI * 2);
+        ctx!.fill();
+        ctx!.globalAlpha = a * 0.2;
+        ctx!.beginPath();
+        ctx!.arc(d.x, d.y, 5, 0, Math.PI * 2);
+        ctx!.fill();
+      }
+      ctx!.globalAlpha = 1;
+      ctx!.globalCompositeOperation = "source-over";
+
+      raf = requestAnimationFrame(draw);
+    }
+    raf = requestAnimationFrame(draw);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      aria-hidden="true"
+    />
+  );
+}

src/components/game/TechTree.tsx

@@ -0,0 +1,141 @@
+"use client";
+// 回响星核 / Echo Nexus — 技术树
+import { useGameStore } from "@/store/gameStore";
+import { TECH_TREE, TECH_BRANCH_META, formatNum } from "@/lib/game/config";
+import { sfx } from "@/hooks/useAudio";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Pickaxe,
+  ScanLine,
+  Rocket,
+  BookOpen,
+  Check,
+  Lock,
+} from "lucide-react";
+import type { TechBranch } from "@/lib/game/types";
+
+const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  Pickaxe,
+  ScanLine,
+  Rocket,
+  BookOpen,
+};
+
+const BRANCH_COLOR: Record<string, string> = {
+  mining: "#34d399",
+  decoding: "#fb7185",
+  expedition: "#fbbf24",
+  narrative: "#e879f9",
+};
+
+export function TechTree() {
+  const tech = useGameStore((s) => s.tech);
+  const insights = useGameStore((s) => s.insights);
+  const buyTech = useGameStore((s) => s.buyTech);
+
+  const branches: TechBranch[] = ["mining", "decoding", "expedition", "narrative"];
+
+  return (
+    <div className="flex flex-col gap-3 h-full">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold">技术树</h3>
+        <span className="text-xs text-muted-foreground">
+          洞见 <span className="text-amber-300 font-mono">{formatNum(insights)}</span>
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-y-auto echo-scroll pr-1 space-y-3">
+        {branches.map((b) => {
+          const meta = TECH_BRANCH_META[b];
+          const Icon = ICONS[meta.icon];
+          const color = BRANCH_COLOR[b];
+          const nodes = TECH_TREE.filter((t) => t.branch === b);
+          return (
+            <div key={b}>
+              <div className="flex items-center gap-2 mb-1.5 px-1">
+                <Icon className="h-3.5 w-3.5" />
+                <span className="text-xs font-medium" style={{ color }}>
+                  {meta.name}
+                </span>
+                <span className="text-[10px] text-muted-foreground/70">
+                  {meta.desc}
+                </span>
+              </div>
+              <div className="grid gap-1.5">
+                {nodes.map((node) => {
+                  const owned = (tech[node.id] ?? 0) >= 1;
+                  const affordable = insights >= node.cost;
+                  return (
+                    <Card
+                      key={node.id}
+                      className={`p-2.5 transition-all duration-200 ${
+                        owned
+                          ? "bg-white/5 border-white/10"
+                          : affordable
+                          ? "bg-black/30 border-white/15 hover:border-white/30 cursor-pointer"
+                          : "bg-black/20 border-white/5 opacity-60"
+                      }`}
+                      style={
+                        owned
+                          ? { boxShadow: `inset 0 0 0 1px ${color}44, 0 0 12px ${color}22` }
+                          : undefined
+                      }
+                    >
+                      <div className="flex items-center gap-2">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-1.5">
+                            <span
+                              className="text-xs font-semibold truncate"
+                              style={{ color: owned ? color : undefined }}
+                            >
+                              {node.name}
+                            </span>
+                            {owned && (
+                              <Check className="h-3 w-3" style={{ color }} />
+                            )}
+                          </div>
+                          <p className="text-[10px] text-muted-foreground/80 truncate">
+                            {node.desc}
+                          </p>
+                        </div>
+                        {!owned && (
+                          <Button
+                            size="sm"
+                            variant={affordable ? "default" : "ghost"}
+                            disabled={!affordable}
+                            onClick={() => {
+                              if (buyTech(node.id)) sfx("techBuy");
+                            }}
+                            className="h-7 px-2 text-[11px] shrink-0"
+                            style={
+                              affordable
+                                ? {
+                                    background: `${color}22`,
+                                    border: `1px solid ${color}66`,
+                                    color,
+                                  }
+                                : undefined
+                            }
+                          >
+                            <Lock className="h-2.5 w-2.5 mr-1" />
+                            {node.cost}
+                          </Button>
+                        )}
+                      </div>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <style jsx global>{`
+        .echo-scroll::-webkit-scrollbar { width: 5px; }
+        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
+        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
+      `}</style>
+    </div>
+  );
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/calendar.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/components/ui/chart.tsx

@@ -0,0 +1,353 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          }
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/context-menu.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/drawer.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/menubar.tsx

@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}

src/components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}