Now I have full context on everything. Two key issues:

1. Device page needs: Bluetooth auto-connect, real-time position guidance, step-by-step modes (by row/region/color), free mode, one-click reset, battery display
2. Create page has bad layout for color palette/params, and the hydration error persists because PixelPreview's seededRandom produces slightly different floating-point opacity values between server and client

Let me also read the remaining part of create-page to see the full editor screen:

Now let me also read the home page to fix the hydration issue:

The hydration error shows that the SSR opacity value is "0.991254" (6 decimal places) while client gets 0.9912543452624959. The Math.round(...*100)/100 approach (2 decimal places) should fix it, but the error log shows it's still happening with values like 0.991254. This means the rounding to 2 decimal places is not being applied. Let me re-read the actual current code:

The hydration issue is a fundamental problem with Math.sin() precision differing between server (Node.js) and browser. Even rounding to 2 decimal places won't help if Math.sin itself gives slightly different results. The fix is to avoid Math.sin() altogether and use a pure integer-based PRNG, or simply pre-compute all cells with fixed data. Let me use a simple LCG (Linear Congruential Generator) that only uses integer math.

Now, let me set up the tasks:

First, let me fix the hydration issue by replacing Math.sin()-based seeded random with a deterministic integer-based LCG across all files that use it:

Now rebuild the Device page with all the required features:

Now rebuild the Create page with better layout, proper upload workflow, and cleaner parameter controls:

三个核心改动已完成。水合问题：将 Math.sin() 替换为纯整数 LCG (Linear Congruential Generator) 算法，确保 Node.js 和浏览器输出完全一致。设备控制页：全面重构为支持蓝牙扫描动画 -> 设备列表 -> 连接动画的完整流程，新增四种引导模式（逐行/区域/按色/自由），每个模式有不同的步骤计算逻辑（BFS 区域检测、颜色分组等），自由模式下可点击标记已拼格子，新增电量显示、颜色图例面板和一键清板。生成页面：拆分为三步流程（Upload -> Settings -> Editor），设置页以独立卡片呈现每个参数（网格尺寸/合色阈值/色板选择），色板带预览色块和选中高亮，生成完成后进入编辑器，底部工具栏、色板选择器和统计面板布局更紧凑清晰。

Now I have complete context. The hydration issue persists because the LCG-based seededRandom in home-page.tsx still produces floating-point values that differ slightly between server and client due to JS engine optimizations. I need to: 1) Fix hydration by using fully integer-based approach with no float division, 2) Massively expand the bead palette to support 24/48/72/96/120/216/221/272 colors plus themed palettes, 3) Rebuild the Create page with proper Chinese UI, grid presets (52x52 1X/2X/4X), and much better layout.

Now let me massively expand the bead palette to support all the requested color tiers:

Now I need to update pixel-engine.ts to reference the new key format (T01 instead of T1):

The pixel engine imports from bead-palette, so it should be fine. Let me now rebuild the Create page completely:

Now I need to update the processImage function in pixel-engine.ts to accept explicit rows parameter and handle the new key format:

Now fix the home page hydration permanently:

The hydration error is caused by Math.sin() giving slightly different floating point results in Node.js vs the browser. The current LCG still uses integer bit masking which can differ. The bulletproof fix is to make PixelPreview client-only using useEffect + mounted state:

The fix is to make PixelPreview render only on the client side using a mounted state pattern:

Now let me also check if useState and useEffect are imported:

Need to add useEffect:

三项核心改动已完成。色板扩展: bead-palette.ts 从 77 色扩充到完整的 272 色体系（灰度/红/橙/黄/绿/青/蓝/紫/粉/棕/荧光/夜光/透明/金属/条纹/肤色/莫兰迪共 18 系列），支持 11 种色板预设（24色基础/48色进阶/72色标准/96色高级/120色豪华/216全实色/221全实色+荧光/272全色系/5色黑白灰/6色复古/5色活力），全部中文命名。生成页面: 全面重构三步流程，网格尺寸支持 52x52 1X、52x104 2X(横)、104x52 2X(竖)、104x104 4X 四种标准预设加自定义拖拽输入（10-200范围），参数设置页以独立卡片呈现每项参数（网格/合色/去背景/色板），色板选择器带描述和色块预览，生成摘要卡片展示当前配置，所有 UI 文字中文化。水合问题: 通过 mounted state + useEffect 模式让 PixelPreview 仅在客户端渲染随机像素，SSR 阶段显示 placeholder 灰色格子，彻底消除跨平台浮点精度差异。