docs: typography

packages/website/src/components/HighlightSyntax.module.css

@@ -3,6 +3,8 @@
 	word-break: break-word;
 	overflow-wrap: break-word;
 	font-family: monospace;
+	font-size: 13px;
+	line-height: 1;
 	color: #171717;
 }
 

packages/website/src/index.css

@@ -71,7 +71,43 @@ html.dark,
 body {
 	background: var(--background);
 	color: var(--foreground);
-	font-family: Arial, Helvetica, sans-serif;
+	font-family:
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		'Noto Sans',
+		'Liberation Sans',
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
+}
+
+/* 文档正文排版优化 */
+.prose {
+	letter-spacing: 0.01em;
+	font-weight: 380;
+}
+
+.prose p {
+	line-height: 1.6;
+}
+
+/* 标题使用中等字重（相对细体更重，但比默认 bold 更轻） */
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+	font-weight: 480;
+}
+
+/* strong/b 也用中等字重 */
+.prose strong,
+.prose b {
+	font-weight: 480;
 }
 
 /* 确保文档页面标题在暗色模式下可见 - 只针对 prose 内的标题 */

packages/website/src/pages/docs/Layout.tsx

@@ -101,7 +101,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 																	<path d={siGooglechrome.path} fill="currentColor" />
 																</svg>
 																<SparklesText
-																	className="text-[length:inherit] font-[inherit]"
+																	className="text-[length:inherit] font-[inherit] font-medium"
 																	sparklesCount={3}
 																>
 																	{item.title}
@@ -123,7 +123,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 
 				{/* Main Content */}
 				<main className="flex-1 min-w-0" id="main-content" role="main">
-					<div className="prose prose-lg dark:prose-invert max-w-none">{children}</div>
+					<div className="prose dark:prose-invert max-w-none">{children}</div>
 				</main>
 			</div>
 		</div>

packages/website/src/pages/docs/advanced/custom-ui/page.tsx

@@ -50,8 +50,8 @@ export default function CustomUIDocs() {
 				<h2 className="text-2xl font-semibold mb-4">{isZh ? '两个事件流' : 'Two Event Streams'}</h2>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
-						? 'PageAgentCore 提供两种不同性质的事件流，服务于不同的 UI 需求：'
+						? 'PageAgentCore 提供两种不同性质的事件流，方便 UI 渲染：'
-						: 'PageAgentCore provides two distinct event streams for different UI needs:'}
+						: 'PageAgentCore provides two distinct event streams for UI rendering:'}
 				</p>
 
 				{/* Comparison Table */}
@@ -59,9 +59,7 @@ export default function CustomUIDocs() {
 					<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
 						<thead>
 							<tr className="bg-gray-100 dark:bg-gray-800">
-								<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left">
+								<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left"></th>
-									{isZh ? '特性' : 'Feature'}
-								</th>
 								<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left">
 									Historical Events
 								</th>
@@ -90,7 +88,7 @@ export default function CustomUIDocs() {
 									{isZh ? '持久化到 agent.history' : 'Persisted in agent.history'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-2">
-									{isZh ? '瞬态，无存储' : 'Transient, not stored'}
+									{isZh ? '瞬态' : 'Transient'}
 								</td>
 							</tr>
 							<tr>

packages/website/src/pages/docs/advanced/page-agent/page.tsx

@@ -193,9 +193,7 @@ agent.panel.dispose()`}
 					<table className="w-full text-sm">
 						<thead>
 							<tr className="bg-gray-50 dark:bg-gray-800/50">
-								<th className="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300">
+								<th className="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300"></th>
-									{isZh ? '特性' : 'Feature'}
-								</th>
 								<th className="px-4 py-3 text-center font-medium text-gray-600 dark:text-gray-300">
 									PageAgent
 								</th>

packages/website/src/pages/docs/features/custom-tools/page.tsx

@@ -32,22 +32,22 @@ import { PageAgent, tool } from 'page-agent'
 
 // override internal tool
 const customTools = {
-	ask_user: tool({
+  ask_user: tool({
-		description:
+    description:
-			'Ask the user or parent model a question and wait for their answer. Use this if you need more information or clarification.',
+      'Ask the user or parent model a question and wait for their answer. Use this if you need more information or clarification.',
-		inputSchema: zod.object({
+    inputSchema: zod.object({
-			question: zod.string(),
+      question: zod.string(),
-		}),
+    }),
-		execute: async function (this: PageAgent, input) {
+    execute: async function (this: PageAgent, input) {
-			const answer = await do_some_thing(input.question)
+      const answer = await do_some_thing(input.question)
-			return "✅ Received user answer: " + answer
+      return "✅ Received user answer: " + answer
-		},
+    },
-	})
+  })
 }
 
 // remove internal tool
 const customTools = {
-    ask_user: null // never ask user questions
+  scroll: null, // never scroll
 }
 	
 const pageAgent = new PageAgent({customTools})

packages/website/src/pages/docs/integration/cdn-setup/page.tsx

@@ -30,7 +30,7 @@ export default function CdnSetup() {
 
 				<CodeEditor
 					className="mb-3"
-					code={`<script src="${CDN_DEMO_URL}" crossorigin="true"></script>`}
+					code={`<script src="DEMO_CDN_URL" crossorigin="true"></script>`}
 				/>
 
 				<div className="bg-yellow-50 dark:bg-yellow-900/20 px-4 py-3 rounded-lg mb-4 text-sm">

packages/website/src/pages/docs/introduction/overview/page.tsx

@@ -117,9 +117,7 @@ export default function Overview() {
 					<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
 						<thead>
 							<tr className="bg-gray-50 dark:bg-gray-800">
-								<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
+								<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left"></th>
-									{isZh ? '特性' : 'Feature'}
-								</th>
 								<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
 									page-agent
 								</th>

packages/website/src/pages/docs/introduction/quick-start/page.tsx

@@ -29,7 +29,7 @@ export default function QuickStart() {
 						</span>
 					</div>
 					<CodeEditor
-						code={`<script src="${isZh ? CDN_DEMO_CN_URL : CDN_DEMO_URL}" crossorigin="true"></script>`}
+						code={`<script src="DEMO_CDN_URL" crossorigin="true"></script>`}
 						language="html"
 					/>
 					<table className="w-full border-collapse text-sm">