fix: header 控件区布局抖动清零（CLS 修复）

- ModeToggle：旧实现在 isClient 前完全不渲染（SSR 无按钮 → hydrate 后
  凭空多出 40px）。改为恒渲染固定 40px 按钮：挂载前显示 Sun 占位图标，
  挂载后切换当前主题图标（动画保留）
- UserMenu：isPending 时渲染 24px 小圆（与终态 135px 差距大）。改为
  与未登录终态同尺寸骨架：Sign in 透明文字（带 muted 底色块）+
  Sign Up 半透明胶囊，右缘与终态精确对齐，占位色跟随各站主题
- SSR HTML 验证：首帧即含 Toggle theme 占位按钮 / Select language /
  UserMenu aria-hidden 骨架（curl 实证）
- 逐帧截图验收：commit 时刻与 hydrate 后 header 右上角布局一致；
  Language/Toggle x 坐标全程稳定

packages/core/src/components/mode-toggle.tsx

@@ -2,10 +2,16 @@
 
 import * as React from "react";
 import { useTheme } from "next-themes";
-import { MoonIcon } from "lucide-react";
+import { MoonIcon, SunMedium } from "lucide-react";
 import { IconSunLow } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 
+/**
+ * # 组件 ModeToggle
+ * 说明：深浅模式切换按钮。按钮**恒渲染**（固定 40px）——挂载前显示 Sun 占位图标
+ *      （next-themes 挂载前主题未知，图标以占位代替），挂载后切换为当前主题图标。
+ *      消除旧实现（isClient 前不渲染）导致的 header 宽度抖动（CLS）。
+ */
 export function ModeToggle() {
   const { theme, setTheme } = useTheme();
 
@@ -15,8 +21,19 @@ export function ModeToggle() {
     setIsClient(true);
   }, []);
 
+  // 挂载前：固定占位图标（与真实按钮同尺寸，无布局位移）
+  if (!isClient) {
+    return (
+      <button
+        aria-label="Toggle theme"
+        className="w-10 h-10 flex hover:bg-hover rounded-lg items-center justify-center outline-none focus:outline-none active:outline-none overflow-hidden"
+      >
+        <SunMedium className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+      </button>
+    );
+  }
+
   return (
-    isClient && (
     <button
       onClick={() => {
         theme === "dark" ? setTheme("light") : setTheme("dark");
@@ -26,18 +43,9 @@ export function ModeToggle() {
       {theme === "light" && (
         <motion.div
           key={theme}
-            initial={{
-              x: 40,
-              opacity: 0,
-            }}
-            animate={{
-              x: 0,
-              opacity: 1,
-            }}
-            transition={{
-              duration: 0.3,
-              ease: "easeOut",
-            }}
+          initial={{ x: 40, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={{ duration: 0.3, ease: "easeOut" }}
         >
           <IconSunLow className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
         </motion.div>
@@ -46,18 +54,9 @@ export function ModeToggle() {
       {theme === "dark" && (
         <motion.div
           key={theme}
-            initial={{
-              x: 40,
-              opacity: 0,
-            }}
-            animate={{
-              x: 0,
-              opacity: 1,
-            }}
-            transition={{
-              ease: "easeOut",
-              duration: 0.3,
-            }}
+          initial={{ x: 40, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={{ ease: "easeOut", duration: 0.3 }}
         >
           <MoonIcon className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
         </motion.div>
@@ -65,6 +64,5 @@ export function ModeToggle() {
 
       <span className="sr-only">Toggle theme</span>
     </button>
-    )
   );
 }

packages/core/src/features/navigation/components/user-menu.tsx

@@ -35,8 +35,16 @@ export function UserMenu() {
   }, [session.data?.user?.id]);
 
   if (session.isPending) {
+    // 占位与"未登录"终态同尺寸（Sign in 文字 + Sign Up 按钮），消除宽度抖动
     return (
-      <div className="h-6 w-6 rounded-full bg-muted animate-pulse" />
+      <div className="flex items-center gap-2" aria-hidden>
+        <span className="relative inline-block h-5 w-12 rounded bg-muted-foreground/25 overflow-hidden select-none">
+          <span className="absolute inset-0 text-transparent">{t('common.actions.signIn')}</span>
+        </span>
+        <span className="bg-primary/40 text-primary-foreground text-sm px-4 py-1.5 rounded-full select-none">
+          <span className="text-transparent">{t('common.actions.signUp')}</span>
+        </span>
+      </div>
     );
   }
 

sites/findai/tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -55,8 +55,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"

sites/launchai/tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -55,8 +55,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"

sites/the-ai-ledger/tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -55,8 +55,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"